@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Roboto:wght@100;300;400;500;700&display=swap');

/* font-family: "Noto Sans KR", sans-serif; */
/* font-family: "Roboto", sans-serif; */
:root{
  --font-size-h2:5rem;
  --font-size-h3:3rem;
  --font-size-h4:2.5rem;
  --font-size-h5:1.5rem;
  --font-size-h6:1.2rem;
  --font-size-IndexParagraph:1.5rem;
  --font-size-MoreButton:1.3rem;

  --font-color-main: #EB6317;
  --font-color-point1:#E81E1A;
  --font-color-point2:#062D88;
  --font-color-sub:#F8F8F8;
  --font-color1:#333333;
  --font-color2:#666666;
  --font-color3:#999999;
}

/* 모바일 코딩 필수 공통영역 */
* {
 margin:0;
 padding:0;
 -webkit-text-size-adjust:none; }
html{font-size: 14px;}
body {
 color:#333;
 font-family: "Noto Sans KR", sans-serif;}
img, fieldset { border:0; vertical-align:top }
ul, ol, li, dl { list-style:none; }
h1, h2, h3, h4, h5, h6 {
 font-size:100%;
 font-weight:normal; }
a { color:inherit; display: block; }
a, a:link {
 color:#333;
 text-decoration:none; }
a:visited { color:#333; }
a:hover, a:active {
 color:#333;
 text-decoration:none; }
em, i, address {
 font-style:normal;
 font-weight:normal; }
legend, caption {
 display:none;
 clear:both; }
input, textarea, select, button, table {
 font-size:inherit;
 font-family:inherit;
 line-height:inherit; }
section, nav, article, aside, hgroup, header, footer { display:block }
textarea, input {
 border-radius:1px;}
textarea { resize:none; }
label { cursor:pointer; }
table{border-collapse: collapse;}
.hidden,#skipNav{display: block; position: absolute; left:-1000%;top:0; width: 1px; height: 1px; overflow: hidden; color: #fff}


/* 전체 공통 */
#wrap{ width:100%; position: relative;  overflow:hidden;}

/* 헤더공통 */
#headerArea{position: fixed; width: 100%; height: 50px; z-index: 100; left: 0; top: 0;}
#headerArea .header_top{height: 50px;}
#headerArea .header_top h1{float: left;}
#headerArea .header_top h1 a{width: 81px; height: 20px; overflow: hidden; text-indent: -999px; background: url(../images/common/logo.png) no-repeat;
margin: 15px 0 15px 13px;}
@media screen and (-webkit-min-device-pixel-ratio: 2){
    #headerArea h1 a{
        background: url(../images/common/logo_x2.png) no-repeat;
        background-size: 45px 28px;
    }
}

#headerArea .menu_ham {float: right; height: 50px; position: relative; border-radius: 5px; top: 0; z-index:110;}
#headerArea .menu_ham span {width: 20px; height: 2px; background: #333; position: relative; text-indent: -9999px; display: block;
    margin: 26px 15px; border-radius: 5px; transition: all .3s;}
#headerArea .menu_ham span::before {content: ''; display: block; width: 20px; height: 2px; background: #333; position: absolute;
    top: -7px; left: 0; border-radius: 5px; transition: all .3s;}
#headerArea .menu_ham span::after {content: ''; display: block; width: 20px; height: 2px; background: #333; position: absolute;
    top: 7px; left: 0; border-radius: 5px; transition: all .3s;}

/* 메뉴가 열렸을때 */
#headerArea.mn_open .menu_ham span, #headerArea.mn_open .menu_ham span::before, #headerArea.mn_open .menu_ham span::after {background: #333;}
#headerArea.mn_open .menu_ham span {background: rgba(0,0,0,0);}
#headerArea.mn_open .menu_ham span::before {transform: rotate(45deg); top: 0;}
#headerArea.mn_open .menu_ham span::after {transform: rotate(-45deg); top: 0;}

/* nav 영역*/
#gnb{position: absolute; width: 100%;  right:-100%; top:0; opacity: 0; background: #fff;}
#gnb .gnb_logo img{display: block; margin: 15px 0 15px 13px;}

#gnb>ul{margin-top: 80px;}
#gnb li{font-weight:bold; position: relative;}
#gnb li a{display: block; padding: 15px 30px; font-size: 1.5rem; font-weight: 600; color: var(--font-color1);}
#gnb li a span{display: block; position: absolute; right: 30px; top: 15px; font-size: 40px;}
#gnb li ul{ display: none;}
#gnb li ul li a{font-size: 1.3rem; font-weight: 500; color: var(--font-color2); padding: 15px 40px;}
#gnb .last{border-bottom:1px solid #FFF}

#gnb .mainMenu .member{display: flex; flex-direction: row-reverse; margin: 40px 22px 0 0;}
#gnb .mainMenu .member a{font-size: 1.3rem; font-weight: 400; padding: 0 15px; color: var(--font-color2);}
#gnb .mainMenu .member a:nth-of-type(1)::before{ content: "|"; margin: 0 24px 0 0; color: var(--font-color2); }
#gnb .mainMenu .depth1 ul{background: #f8f8f8;}

#gnb .mainMenu .sns{display: flex; flex-direction: row-reverse; gap: 18px; margin: 20px 0 0 0;}
#gnb .mainMenu .sns li a{padding: 0 0; font-size: 44px; color: var(--font-color2); margin-top: 25px;}
#gnb .mainMenu .sns li:nth-of-type(1){margin-right: 36px;}
#gnb li ul.sns { display: flex !important; }

/* 비주얼 영역 */
.visual .swiper1 .swiper-slide p{text-shadow: 1px 1px 10px rgba(0, 0, 0, .2);}
.visual .swiper1 .swiper-slide p:nth-of-type(1){font-size: 2.3rem; font-weight: 700; position: absolute; top: 40%;}
.visual .swiper1 .swiper-slide p:nth-of-type(2){font-size: 1.1rem; font-weight: 500; position: absolute; top: 55%;}
.visual .swiper1 .swiper-slide p span{color: var(--font-color-main);}


/* 푸터공통 */
#footerArea{background: #1E1E1E; padding: 30px;}
#footerArea .top_move {
    width: 50px;
    height: 50px;
    background: #eb6317;
    color: #fff;
    font-size: 1.1rem;
    border-radius: 50%;
    font-weight: 600;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, .3);
    position: fixed;
    right: 10px;
    bottom: 100px;
    z-index: 90;
    display: none;
    transition: color, background .5s ease-out;
}
#footerArea .top_move span{display: block; text-align: center; margin-top: 13px;}


#footerArea .footer_text{color: #fff;}
#footerArea .footer_text img{transform: scale(.7); transform-origin: left top; display: block;}
#footerArea .footer_text strong{display: block; margin-top: 10px; font-size: 1.2rem;}
#footerArea .footer_text p{display: block; margin-top: 10px; line-height: 1.5rem;}
#footerArea .footer_text .footer_text_btn{display: flex; gap: 30px;}
#footerArea .footer_text .footer_text_btn a{color: #fff; font-size: 1.2rem; margin-top: 20px; font-weight: 500;}


#footerArea .footer_text hr{display: block; border: none; border-top: 1px solid #fff;
margin-top: 20px;}

#footerArea .family{display: inline-block; color: #333; border-radius: 15px; margin-top: 30px;}
#footerArea .family{width:100%; border:1px solid #ccc; position:relative;}
#footerArea .family .arrow{display:block; font-size:1.3em; padding: 10px 0; text-align: center; transition: all 1s; color: #fff;}
#footerArea .family .arrow i{font-size:.8em ; color: #fff; transition: all .3s ease-out;}
#footerArea .family .arrow:hover i{color:var(--font-color-main);}
#footerArea .family .aList{position:absolute; top:-503px; left:-1px; width:100%; border:1px solid #ccc;
    background: #fff; display: none; border-radius: 10px; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);}
#footerArea .family .aList li{line-height:1.5em; border-bottom:1px solid #ccc;}
#footerArea .family .aList li a{display:block;text-align: center; padding: 14px 0; transition: all .3s; color: #1E1E1E; font-size: 1.1rem;}
#footerArea .family .aList li:last-child{border-bottom: none;}
#footerArea .family .aList li a:hover{color:var(--font-color-main);}