body { position: relative; } .main_wrap { height: 100%; min-width:1400px; } .inner {position:relative;margin:0 auto; z-index:50;} .head_util .util_area, .nav-container, .contents { width: 1400px; margin: 0 auto; } @media screen and (max-width:1024px){ .main_wrap { height: 100%; width:100%; min-width:auto; } .head_util .util_area{width: 100%;} .nav-container, .contents { width: 95%; margin: 0 auto; } } @media screen and (max-width:640px){ .main_wrap{ background:#f2f2f2; } } /******************************************************************************************************** header ********************************************************************************************************/ .header::after { content: ""; display: block; clear: both; } .header { height: 117px; padding-top: 0; margin-bottom: 0; } /* 濡쒓퀬 諛� ���댄� area */ .head_tit { float: left; padding:3px 0 0 25px; } .head_tit .logo::after { content: ""; display: block; clear: both; } .head_tit .logo a { float: left; margin:0; } /* header �ъ슜�� �뺣낫 諛� �몄뼱 �좏깮 area */ .head_util { width:100%; font-size: 14px; height:36px; border-bottom:1px solid #ddd; } .head_util::after { content: ""; display: block; clear: both; } .head_util .util_area li{ position: relative; display: block; float: left; padding:0 19px; } .head_util .util_area li:hover{ background:#E3EAF0; } .head_util .util_area li a{ color:#000; line-height:36px; padding:2px 4px; } .head_util .util_area .util_info li:last-child { border-left:1px solid #ddd; } .head_util .util_area .util_info li:last-child a{ color: #1b60c1; } .head_util .util_area .util_member li{ color: #ddd; border-left:1px solid #ddd; } .head_util .util_area .util_member li:last-child{ border-left:none; background:#0E457A; } .head_util .util_area .util_member li:last-child a{ color: #fff; } .head_util .util_area .util_member li a.util_logout{ background: url(../../image/icon/ico_logout.png) no-repeat 0; padding-left:25px; } .head_util .util_area .util_member li a.util_mypage, .head_util .util_area .util_member li a.util_login, .head_util .util_area .util_member li a.util_join{ padding-left:20px; } .head_util .util_area .util_member li a.util_mypage{ background: url(../../image/icon/ico_mypage.png) no-repeat 0 4px; } .head_util .util_area .util_member li a.util_login{ background: url(../../image/icon/ico_login.png) no-repeat 0 4px; } .head_util .util_area .util_member li a.util_join{ background: url(../../image/icon/ico_join.png) no-repeat 0 4px; } .brand { float: left; text-transform: uppercase; font-size: 1.4em; } .brand .logo{ position: relative; top: auto; left: auto; } .brand img{ width: auto; margin-bottom: 2px; vertical-align: middle; } .brand a, .brand a:visited { color: #000; text-decoration: none; line-height: 100%; margin: 16px auto 0; /*width: 40%;*/ display: block; } .logo_w{display:none;} @media screen and (max-width:1024px){ .header .brand{ line-height: 70px; } /*.header .brand img{ width:80%; }*/ .brand a, .brand a:visited{ margin: 16px 0 0; width: auto; } } @media screen and (max-width:640px){ .main_header.header { position:absolute; } .sub_header.header { position:relative; } .header { top:0; height: auto; width:100%; background:none; border:none; z-index:999; } /*.header.header_bg{ height: 68px; background: #ffffff90; }*/ .header .brand{ width:100%; text-align:center; } .header .brand a, .header .brand a:visited{ width: 40%; margin: 12px auto; } .header .brand img { width: 100%; } .main_header.header .brand a img.logo_w{display:block;} .main_header.header .brand a img.logo_bk{display:none;} .header .head_util{display:none;} .sub_header.header .brand a img.logo_w{display:none;} .sub_header.header .brand a img.logo_bk{display:block;} } /******************************************************************************************************** navigation ********************************************************************************************************/ /* 20211216 異붽�, �섏젙 */ .navigation { position:relative; border-bottom: 1px solid #dddddd; z-index: 999; /* 20211222 異붽�, �섏젙 */ } /* .brand, nav{ line-height: 80px; } */ nav { position: absolute; width: 100%; left: 0; } .gnb { position:absolute; left: 47.5%; width: 920px; transform: translate(-50%); z-index:2; overflow:hidden; height: 77px; } .gnb .depth1 { position:relative; display:block; color: #222; font-size:20px; font-weight: 600; line-height: 77px; padding: 0 10px; } .gnb>ul { display: grid; display: -ms-grid; grid-template-columns: 20% 20% 20% 20% 20%; -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; } .gnb>ul > li:nth-child(1) { -ms-grid-column: 1; } .gnb>ul > li:nth-child(2) { -ms-grid-column: 2; } .gnb>ul > li:nth-child(3) { -ms-grid-column: 3; } .gnb>ul > li:nth-child(4) { -ms-grid-column: 4; } .gnb>ul > li:nth-child(5) { -ms-grid-column: 5; } .gnb>ul>li { text-align:center; margin: 0 ; } .gnb>ul>li>a:hover { color:#2196F3; } .gnb>ul>li>ul { display:block; opacity:0; transform:translateY(20px); padding: 10px 0; } .gnb>ul>li>ul:hover{ height: 260px!important; background-color: #f9fcff; } .gnb>ul>li>ul>li { float:none; width:auto; font-weight: normal; text-align: left; padding: 10px 20px 6px; font-weight: normal; } .gnb>ul>li>ul>li>a { font-size:14px; color:#222; line-height: 16px; /* letter-spacing:-0.5px; */ } .gnb>ul>li>ul>li>a:hover { color:#2196F3; } .gnb>ul>li>ul>li>a b{ display: block; font-weight: normal; } .gnb .line { position:absolute; display:block; bottom: 0px; height: 3px; width:0%; background: #2196F3; left: 0; right: 0; margin: auto; z-index:-99; } .navi-bg { position:absolute; display:block; width:100%; height:0px; left: 0; top: 77px; z-index:1; overflow: hidden; box-shadow: 0 30px 30px 0px rgb(0 0 0 / 10%); } .navi-bg .white-bg { width:100%; height: 280px; background:#fff; border-bottom:1px solid #dedede; } /* 20211216 異붽�, �섏젙 */ /* 20211216 nav .nav-list { text-align:center; } nav .nav-list a, nav .nav-list a:visited { display: inline-block; font-size:20px; font-weight:600; margin: 0 29px; color: #222; text-decoration: none; cursor:pointer; } nav .nav-list a:hover, nav .nav-list a:visited:hover, nav .nav-list:hover a { line-height: 75px; border-bottom: 3px solid #3182F6; color: #3182F6; } nav .nav-list .nav_area{ display:none; } nav .nav-list:hover .nav_area{ display:block; position:absolute; top:80px; left:0; width:100%; height:172px; background:#fff; z-index:999; border-top:1px solid #ddd; text-align:left; } nav .nav-list:hover .nav_area::before{ height:100%; width: 20%; background:#0E457A; content: ""; display: inline-block; } nav .nav-list:hover .nav_area .nav_menu { position:absolute; top:0; width:100%; height: 100%; box-shadow: 0 10px 20px 0px rgb(0 0 0 / 10%); } */ /*nav .nav-list span:hover.nav_area .nav_menu .inner{ width:1146px; padding:254px; }*/ /* nav .nav-list:hover .nav_area .nav_menu .inner{ width:1400px; height: 100%; } nav .nav-list:hover .nav_area .nav_menu .inner div{ position:relative; width:254px; height: 100%; background:#0E457A; overflow: inherit; } nav .nav-list:hover .nav_area .nav_menu .inner div p{ position:absolute; top:0; right:45px; width:400px; color:#fff; font-size:35px; line-height: 172px; text-align:right; } nav .nav-list:hover .nav_area .nav_menu .inner div p img{vertical-align: sub;} .nav-list:hover .nav_area .nav_menu .inner ul{ height: 100%; width: 300px; font-size: 15px; padding:17px 0; border-right: 1px solid #ddd; box-sizing: border-box; } nav .nav-list:hover .nav_area .nav_menu .inner > ul {display:block;} nav .nav-list:hover .nav_area .nav_menu .inner li, nav .nav-list:hover .nav_area .nav_menu .inner li a{ display:block; } nav .nav-list:hover .nav_area .nav_menu .inner li a{ font-size: 15px; color:#222; line-height: 3em; font-weight: 300; text-align:left; padding:0 50px; cursor:pointer; margin:0; border-bottom: none; } nav .nav-list:hover .nav_area .nav_menu .inner li:hover a{ background:#E3EAF0; border-bottom: none; } 20211216 */ @media screen and (max-width:1024px){ .navigation{border:none;} } /* Mobile navigation */ .nav-mobile { display: none; position: absolute; top: 8px; right: -11px; background: #262626; width: 70px; } .nav_toggle { position: absolute; left: 0px; top: 12px; height: 25px; padding: 3px 30px 0px 0px; background: transparent; cursor: pointer; } .nav_toggle span, .nav_toggle span:before, .nav_toggle span:after { cursor: pointer; border-radius: 5px; height: 5px; width: 30px; margin-bottom: -3px; background: #222222; position: absolute; display: block; content: ''; transition: all 300ms ease-in-out; } .nav_toggle span:before { top: -10px; } .nav_toggle span:after { bottom: -7px; } .nav_toggle_sidebar{ display: block; position: fixed!important; right:0; width: 100%; height: 100%; background-color: #fff; z-index: 99; overflow: auto; } @media only screen and (min-width: 641px) { .sidebar_util_area{display: none;} } @media only screen and (max-width: 1024px) { .gnb{ display: none; } .nav-mobile { display: block; } .nav_toggle_sidebar{ top:37px; } } /*20240628 �좎삁由� �섏젙*/ .nav_toggle_sidebar .m_nav-list{ width:90%; margin:50px auto 0; display: flex; white-space: nowrap; justify-content: center; } /*20240628 �좎삁由� �섏젙*/ .nav_toggle_sidebar .m_nav-list .m_menu{ /*float: left; width:19.8%;*/ height: 81vh; /*20240417 �좎삁由� �섏젙 - 70vh�먯꽌 81vh濡� 蹂�寃�*/ border-left:1px solid #ddd; flex: 1; } /*20240417 �좎삁由� 異붽� - �꾩껜硫붾돱 泥ル쾲吏� �곸뿭 �쇱そ �쇱씤 ��젣*/ .nav_toggle_sidebar .m_nav-list .m_menu:first-child { border-left: 0; } .nav_toggle_sidebar .m_nav-list .m_menu span a{ display:block; font-size:1.5em; font-weight:600; text-align:left; color:#222; padding:0 20px; } .nav_toggle_sidebar .m_nav-list .m_menu .nav_area { margin-top:20px; } .nav_toggle_sidebar .m_nav-list .m_menu .nav_area .nav_menu a{ display:block; line-height: 18px; padding: 7px 20px; /*20240417 �좎삁由� �섏젙 - 8px�먯꽌 7px*/ color: #707070; } .nav_toggle_sidebar .m_nav-list .m_menu .nav_area .nav_menu a:hover{ background:#E3EAF0; } .nav_toggle_sidebar .m_nav-list .m_menu .nav_area .nav_menu a span{ display:block; } /*20240424 �좎삁由� padding媛� 異붽�*/ .nav_toggle_sidebar .m_nav-list .m_menu .nav_area .nav_menu a.nav_menu_3depth{ font-size: 13px; color:#666; margin-left: 10px; padding: 5px 20px; } .nav_toggle_sidebar .m_nav-list .m_menu .nav_area .nav_menu a.nav_menu_3depth:before{ content:"-"; display:inline-block; margin: 0 5px 0 -9px; } @media only screen and (max-width: 768px){ .nav_toggle_sidebar .m_nav-list{ width: 97%; } .nav_toggle_sidebar .m_nav-list .m_menu span a{ font-size: 1.3em; padding: 0 10px; } .nav_toggle_sidebar .m_nav-list .m_menu .nav_area .nav_menu a{ padding: 7px 10px; font-size: .9em; } } @media screen and (max-width: 640px){ /*** s: �좉�踰꾪듉 �섏젙 ***/ .nav_toggle{ top: 6px; left: 10px; } /*** e: �좉�踰꾪듉 �섏젙 ***/ .nav_toggle_sidebar{ top: 0; } .btn_toggle_close{ position: absolute; top: -10px; right: -9px; } .sidebar_util_area{ display:block; } .sidebar_util_area ul{ width:100%; } .sidebar_util_area li{ position: relative; display: block; float: left; line-height: 40px; } .sidebar_util_area li:hover{ text-decoration:underline; } .sidebar_util_area li a{ color:#000; line-height:36px; padding:2px 4px; } .sidebar_util_area .sidebar_util_member li{ float:left; color: #222; padding:0 0 0 19px; } .sidebar_util_area .sidebar_util_member li a.util_logout{ background: url(../../image/icon/ico_logout.png) no-repeat 0; padding-left:25px; } .sidebar_util_area .sidebar_util_member li a.util_login, .sidebar_util_area .sidebar_util_member li a.util_mypage, .sidebar_util_area .sidebar_util_member li a.util_join{ padding-left:20px; } .sidebar_util_area .sidebar_util_member li a.util_login{ background: url(../../image/icon/ico_login.png) no-repeat 0 5px; } .sidebar_util_area .sidebar_util_member li a.util_mypage{ background: url(../../image/icon/ico_mypage.png) no-repeat 0 5px; } .sidebar_util_area .sidebar_util_member li a.util_join{ background: url(../../image/icon/ico_join.png) no-repeat 0 5px; } .sidebar_util_area .sidebar_util_info li{ width: calc(50% - 1px); background:#F2F2F2; text-align:center; } .sidebar_util_area .sidebar_util_info li:last-child { border-left:1px solid #ddd; } .sidebar_util_area .sidebar_util_info li:last-child a{ color: #3182F6; } .nav_toggle_sidebar .m_nav-list{ width: 90%; border-top: 1px solid #3182F6; } .nav_toggle_sidebar .m_nav-list .m_menu{ width:100%; height: auto; border-left:none; border-bottom:1px solid #ddd; } .nav_toggle_sidebar .m_nav-list .m_menu span, .nav_toggle_sidebar .m_nav-list .m_menu .nav_area{ float:left; margin: 11px 0; } .nav_toggle_sidebar .m_nav-list .m_menu span{ width:35%; padding: 7px 10px; } .nav_toggle_sidebar .m_nav-list .m_menu .nav_area{ width:64%; } .nav_toggle_sidebar .m_nav-list .m_menu .nav_area .nav_menu a span{ display:none; } } .gnb_sch .btn_sch,.gnb_sch input{ height:44px; } .gnb_sch{ width:266px; height:38px; border:1px solid #0E457A; margin-top: 20px; } .sub_header .gnb_sch{ height:38px; font-size: 14px; } .gnb_sch input{ border:none; width:65%; margin:0 auto; color:#707070; padding: 0 0 0 13px; } .gnb_sch span{ display:block; width:80px; } .gnb_sch .btn_sch{ width:100%; color:#fff; background: #0E457A url(../../image/icon/ico_zoom.png) no-repeat 90% 8px; padding-right: 18px; } .m_gnb_sch{display:none;} /* @media screen and (max-width: 1024px) { */ .btn_toggle_close{ font-size: 0; line-height: 0; overflow:hidden; } .btn_toggle_close{ width:27px; height:27px; background: url(../../image/m_icon/ico_close.png) no-repeat; background-size: 100%; margin: 20px; } .gnb_sch_wrap{display:none;} .m_gnb_sch{ display:block; position:relative; margin: 20px auto 0; width:50%; } .m_gnb_sch .gnb_sch{ width:100%; border:none; margin-top: 35px; } .m_gnb_sch .gnb_sch fieldset{ display: flex; } .m_gnb_sch .gnb_sch input{ width: 100%;flex:1; box-sizing: border-box; border:3px solid #d04010; border-radius: 0; } .m_gnb_sch span.btn_zoom{ width:60px; flex: 0 0 60px; height:44px; } .m_gnb_sch span.btn_zoom .btn_sch{ width:100%; height: 100%; background: #d04010; padding-right: 6px; border-radius:0 } .m_gnb_sch span.btn_zoom .btn_sch:focus{ outline:none; border:1px solid #9a2f0c; } /* } */ @media only screen and (max-width: 768px){ .m_gnb_sch{ width: 60%; } .m_gnb_sch .gnb_sch input{ width: 78%; } } @media only screen and (max-width: 640px){ .m_gnb_sch{ width: 90%; margin: 15px auto 0; } .m_gnb_sch .gnb_sch input{ width: 82%; } } @media only screen and (max-width: 480px){ .m_gnb_sch{ width: 90%; margin: 15px auto 0; } .m_gnb_sch .gnb_sch input{ width: 74%; } .btn_toggle_close{ width:22px; height:22px; } .nav_toggle_sidebar .m_nav-list .m_menu span{ width: 46%; padding: 7px 0; } .nav_toggle_sidebar .m_nav-list .m_menu .nav_area{ width: 53%; } } @media only screen and (max-width: 280px){ .m_gnb_sch .gnb_sch input{ width: 67%; } .nav_toggle_sidebar .m_nav-list .m_menu span { width: 100%; padding: 9px 0px 0; } .nav_toggle_sidebar .m_nav-list .m_menu span a{ text-align:center; } .nav_toggle_sidebar .m_nav-list .m_menu .nav_area{ width: 100%; margin: 0 10px 10px; } .btn_toggle_close{ width: 18px; height: 18px; } } /******************************************************************************************************** footer ********************************************************************************************************/ footer{ width:100%; } .footer_nav { height: 39px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin-top:110px; } .footer_nav ul,.footer_info{ width:1400px; margin:0 auto; } .footer_nav li{ position: relative; float:left; font-size: 14px; line-height:39px; padding: 0 1.5rem 0px; } .footer_nav li:first-child{ margin-left:280px; padding-left:0; } .footer_nav li:first-child::before{ content: ""; } .footer_nav li a{ color:#222; } .footer_nav li a:hover{ text-decoration:underline!important; } .footer_nav li::before { position: absolute; top: 0; left: 0px; font-size: 0.7em; color: #ddd; content: "��"; } .footer_info{ padding:20px 0; font-size:0.8em; } .footer_info .footer_logo {width:280px;} .footer_info .footer_logo img{opacity:.7;} .footer_info .footer_adds dl{ line-height: 23px; } .footer_info .footer_adds dt, .footer_info .footer_adds dd{ float:left; } .footer_info .footer_adds dt{ font-weight:600; color:#222; padding-right:20px; } .footer_info .footer_adds dd{ font-weight:300; } .footer_info .footer_adds dd span{ font-weight:500; padding:0 5px 0 20px; } .footer_info .footer_adds .copyright{ color:#707070; } .footer_nav .footer_logo .logo_w{display:none;} .footer_nav .footer_logo .logo_bk{display:block;} @media screen and (max-width:1024px){ .footer_nav{ margin-top: 60px; } .footer_nav ul, .footer_info{ width: 95%; } .footer_info .footer_logo { width: 15%; text-align: center; line-height:0; } .footer_info .footer_logo img{ width: 70%; } .footer_nav li:first-child{ margin-left: 5px; } } @media screen and (max-width:768px){ .footer_info{ padding: 15px 0; } .footer_info .footer_logo { padding-bottom: 8px; } .footer_info .footer_logo img{ width: 100%; } } @media screen and (max-width:640px){ .footer_nav { margin-top: 0; background:#555555; height:auto; border-bottom: none; } .footer_nav ul{ width:100%; } .footer_nav li { box-sizing: border-box; width: calc(50% - 1px); text-align: center; border-left:1px solid #707070; border-bottom:1px solid #707070; padding: 0 0 0px; } .footer_nav li a{ color:#fff; font-size:13px; } .footer_nav li:first-child{ margin:0; } .footer_nav li::before{ display:none; } .footer_info{ width: 100%; background:#707070; } .footer_adds dl, .footer_info .footer_adds .copyright{ width: 94%; color:#CCCCCC; margin:0 auto; } .footer_info .footer_adds dt, .footer_info .footer_adds dd, .footer_info .footer_adds dd span, .footer_info .footer_adds .copyright{ font-size: 13px!important; } .footer_info .footer_adds dt{ width: 100%; color:#fff; font-weight:300; } .footer_info .footer_logo{ width: 100%; padding-left:20px; } .footer_info .footer_logo { width: 27%; display: block; margin: 0 auto; } .footer_info .footer_logo .logo_w{display:block;} .footer_info .footer_logo .logo_bk{display:none;} } @media screen and (max-width:480px){ .footer_info .footer_logo{ width: 40%; } .footer_info .footer_adds dt, .footer_info .footer_adds dd, .footer_info .footer_adds dd span, .footer_info .footer_adds .copyright{ font-size:12px!important; } .footer_info .footer_adds dt{ padding-right: 0; }gnb .footer_info .footer_adds dd{ line-height: 16px; } } /*** �쒕툕 lnb�녿뒗 �붾㈃ 20211028 異붽� ***/ h2.sub_main_title{ width:1400px; font-size:40px; font-weight:600; color:#222; padding: 50px 0 28px; margin:0 auto; } h2.sub_main_title span{ display:inline-block; font-size:15px; font-weight:normal; padding: 0 0 0 26px; } /*2024.04.11 �좎삁由� �섏젙 - color 媛� #e87300; �먯꽌 #d9002c;濡� 蹂�寃�*/ .normal-wrap .lnb ul li a:hover{ color: #d9002c; } /*20211216*/ .normal-wrap .lnb ul li a.line_two{ padding-top: 8px; } .normal-wrap .lnb ul li a.line_two span{ display: block; } .head_util .util_area .util_member li:last-child{background: #e3022e;} .gnb_sch23 button{border-radius: 0;}