@charset "utf-8";

/* ---------------------------------- *
    * COMMON
 * ---------------------------------- */
 main{width:100%; overflow-x:hidden;}

.container{width:100%; max-width:1680px; margin:0 auto; padding:0 30px; position:relative;}

.fl-box{display:flex; flex-wrap:wrap;}
.gr-box{display:grid;}

.no-scroll{height:100%; overflow:hidden;}


/* ---------------------------------- *
    * HEADER
 * ---------------------------------- */
.header{background-color:#fff; border-bottom:1px solid #dfdfdf; position:relative; z-index:920;}
.header .container{align-items:center; justify-content:space-between;}

.header .logo{max-width:320px;}
.header .logo a{display:inline-block; line-height:0;}
.header .logo a img{height:50px;}

.header .top{align-items:center; justify-content:flex-end;}
.header .top .gnb ul{align-items:center; gap:40px;}
.header .top .gnb ul li{position:relative;}
.header .top .gnb ul li a{display:block; padding:35px 10px; font-size:2.2rem; font-weight:500; line-height:3.0rem; position:relative;}
.header .top .gnb ul li a.on{color:var(--mainColor1);}
.header .top .gnb ul li a.on:after{content:''; width:100%; height:5px; background-color:var(--mainColor1); position:absolute; bottom:0; left:0;}
.header .top .gnb ul li .snb{display:none; width:220px; padding:20px; border-radius:20px; position:absolute; top:100px; left:50%; transform:translateX(-50%); background-color:#fff; box-shadow:0 0 15px rgba(0,0,0,0.2);}
.header .top .gnb ul li .snb dd{text-align:center; margin-bottom:10px;}
.header .top .gnb ul li .snb dd:last-child{margin-bottom:0;}
.header .top .gnb ul li .snb dd a{font-size:1.6rem; font-weight:400; line-height:2.0rem; color:#666; padding:0;}
.header .top .gnb ul li .snb dd a:hover{color:#000;}
.header .top .menu{align-items:center; gap:15px; margin-left:60px;}
.header .top .menu li{position:relative;}
.header .top .menu li:after{content:''; width:1px; height:12px; background-color:#dadada; position:absolute; top:4px; right:-8px;}
.header .top .menu li:last-child::after{display:none;}
.header .top .menu li a{display:block; font-size:1.5rem; font-weight:400; color:#919191;}
.header .top .m_menu_open{line-height:0; display:none;}
.header .top .m_menu_open img{width:30px; filter:invert(15%) sepia(0%) saturate(3628%) hue-rotate(227deg) brightness(98%) contrast(70%);}

/* ---------------------------------- *
    * SNB
 * ---------------------------------- */
/*.snb_bg{display:none; width:100%; height:100%; background-color:rgba(0,0,0,0.5); position:fixed; top:0; left:0; z-index:910;}
.snb{display:none; width:100%; padding:50px; background:url('../img/common/gnb_bg.png') no-repeat 50px 60% #fff; background-size:22%; border-radius:0 0 30px 30px; border-top:1px solid #dfdfdf; position:absolute; top:100px; left:0; z-index:930;}

.snb .menu_title{width:25%; min-height:400px; padding-right:6%;}
.snb .menu_title h2{font-size:4.0rem; line-height:1.4em; color:#3c3c3c; text-align:right;}

.snb .list{width:75%;}
.snb .list ul{width:100%; grid-template-columns:repeat(5, 1fr); align-items:start; gap:40px 20px;}
.snb .list ul li h3 a{display:block; background-color:#eee; border-radius:10px; padding:20px 10px; font-size:2.0rem; font-weight:500; line-height:25px; text-align:center; transition:all 0.3s;}
.snb .list ul li:hover h3 a{background-color:var(--mainColor2); color:#fff;}
.snb .list ul li dl{padding:20px 0 0 10px;}
.snb .list ul li dl dd{margin-bottom:10px; padding-left:15px; position:relative;}
.snb .list ul li dl dd:before{content:''; width:5px; height:5px; border-radius:5px; background-color:#323232; position:absolute; top:8px; left:0;}
.snb .list ul li dl dd:last-child{margin-bottom:0;}
.snb .list ul li dl dd a{display:inline-block; font-size:1.8rem; line-height:2.2rem; color:#504f4f;}
.snb .list ul li dl dd a:hover{font-weight:500; color:#000;}*/

/* ---------------------------------- *
    * MOBILE MENU
 * ---------------------------------- */
.m_menu{display:none; width:100%; height:100%; background-color:rgba(0,0,0,0.5); position:fixed; top:0; left:0; z-index:999;}
.m_menu .inner{width:90%; max-width:400px; height:100%; background-color:#fff; position:absolute; top:0; right:0;}

.m_menu .m_top{padding:30px; align-items:center; justify-content:space-between;}
.m_menu .m_top .m_menu_close{line-height:0;}
.m_menu .m_top .m_menu_close img{width:22px; filter:invert(15%) sepia(0%) saturate(3628%) hue-rotate(227deg) brightness(98%) contrast(70%);}
.m_menu .m_top ul{align-items:center; gap:15px;}
.m_menu .m_top ul li{position:relative;}
.m_menu .m_top ul li:after{content:''; width:1px; height:12px; background-color:#dadada; position:absolute; top:5px; right:-8px;}
.m_menu .m_top ul li:last-child::after{display:none;}
.m_menu .m_top ul li a{display:block; font-size:1.6rem; font-weight:400; color:#919191;}

.m_menu .m_gnb{height:calc(100% - 82px); overflow-y:auto;}
.m_menu .m_gnb .list .m_depth01{display:flex; align-items:center; justify-content:space-between; padding:20px 30px; border-bottom:1px solid #dbdbdb; font-size:2.4rem; line-height:2.4rem; font-weight:500; transition:all 0.3s;}
.m_menu .m_gnb .list:first-child .m_depth01{border-top:1px solid #dbdbdb;}
.m_menu .m_gnb .list .m_depth01 .arrow{padding:8px; line-height:0; background-color:#fff; border:1px solid #e1e1e1; border-radius:30px; transition:all 0.3s;}
.m_menu .m_gnb .list .m_depth01 .arrow img{width:12px; filter:invert(85%) sepia(0%) saturate(1%) hue-rotate(226deg) brightness(87%) contrast(90%);}
.m_menu .m_gnb .list .m_depth01:hover, .m_menu .m_gnb .list .m_depth01.on{background-color:var(--mainColor1); border-color:var(--mainColor1); font-weight:600; color:#fff;}
.m_menu .m_gnb .list .m_depth01:hover .arrow, .m_menu .m_gnb .list .m_depth01.on .arrow{border-color:#fff; transform:rotate(180deg);}
.m_menu .m_gnb .list .m_depth01:hover .arrow img, .m_menu .m_gnb .list .m_depth01.on .arrow img{filter:invert(63%) sepia(82%) saturate(388%) hue-rotate(32deg) brightness(98%) contrast(87%);}
.m_menu .m_gnb .list .m_snb{padding:15px; border-bottom:1px solid #dbdbdb;}
.m_menu .m_gnb .list .m_snb li{margin-bottom:5px;}
.m_menu .m_gnb .list .m_snb li:last-child{margin-bottom:0;}
.m_menu .m_gnb .list .m_snb .m_depth02{display:flex; align-items:center; justify-content:space-between; background-color:#eee; border-radius:10px; padding:20px 25px; font-size:2.0rem; font-weight:500; line-height:2.0rem;  transition:all 0.3s;}
.m_menu .m_gnb .list .m_snb .m_depth02 .arrow{line-height:0; transition:all 0.3s;}
.m_menu .m_gnb .list .m_snb .m_depth02 .arrow img{width:14px; filter:invert(44%) sepia(1%) saturate(3812%) hue-rotate(20deg) brightness(90%) contrast(98%);}
.m_menu .m_gnb .list .m_snb .m_depth02:hover, .m_menu .m_gnb .list .m_snb .m_depth02.on{background-color:var(--mainColor2); font-weight:600; color:#fff;}
.m_menu .m_gnb .list .m_snb .m_depth02:hover .arrow, .m_menu .m_gnb .list .m_snb .m_depth02.on .arrow{transform:rotate(180deg);}
.m_menu .m_gnb .list .m_snb .m_depth02:hover .arrow img, .m_menu .m_gnb .list .m_snb .m_depth02.on .arrow img{filter:invert(100%);}
.m_menu .m_gnb .list .m_snb .m_depth03{padding:20px 20px 15px;}
.m_menu .m_gnb .list .m_snb .m_depth03 dd{margin-bottom:10px; padding-left:15px; position:relative;}
.m_menu .m_gnb .list .m_snb .m_depth03 dd:before{content:''; width:5px; height:5px; border-radius:5px; background-color:#323232; position:absolute; top:8px; left:0;}
.m_menu .m_gnb .list .m_snb .m_depth03 dd:last-child{margin-bottom:0;}
.m_menu .m_gnb .list .m_snb .m_depth03 dd a{display:inline-block; font-size:1.8rem; line-height:2.2rem; color:#504f4f;}
.m_menu .m_gnb .list .m_snb .m_depth03 dd a:hover{font-weight:500; color:#000;}


/* ---------------------------------- *
    * QUICK
 * ---------------------------------- */
.quick{position:absolute; top:180px; right:30px; z-index:900;}
.quick.q_fixed{position:fixed; top:30px;}

.quick ul li{border-radius:50px; margin-bottom:3px;}
.quick ul li:last-child{margin-bottom:0;}
.quick ul li a{display:block; line-height:0;}
.quick ul li a img{width:50px; filter:invert(100%);}
.quick ul li.quick01{background-color:#ffe100;}
.quick ul li.quick01 img{filter:inherit;}
.quick ul li.quick02{background-color:#d12728;}
.quick ul li.quick03{background-color:var(--mainColor2);}
.quick ul li.quick04{background-color:#baa5cb;}
.quick ul li.quick_top{border:1px solid #d7d7d7; background-color:#fff;}
.quick ul li.quick_top a{padding:18px;}
.quick ul li.quick_top img{width:12px; filter:inherit; transform:rotate(180deg);}


/* ---------------------------------- *
    * FOOTER
 * ---------------------------------- */
.footer{background-color:#292e32; border-radius:50px 50px 0 0;}
.footer .fl-box{align-items:flex-start; justify-content:space-between;}

.footer .ft_logo{padding:50px 0;}
.footer .ft_logo h1{line-height:0;}
.footer .ft_logo h1 img{width:300px; filter:brightness(0) invert(1); opacity:0.7;}
.footer .ft_logo .family{position:relative;}
.footer .ft_logo .family .family_btn{display:block; width:210px; padding:15px 50px 15px 25px; border:1px solid rgba(255,255,255,0.3); border-radius:50px; font-size:1.6rem; font-weight:500; color:rgba(255,255,255,0.8); position:relative; transition:all 0.3s;}
.footer .ft_logo .family .family_btn:after{content:''; width:13px; height:13px; background:url('../img/main/ic_plus.svg') no-repeat center; background-size:cover; filter:invert(100%); position:absolute; top:50%; right:25px; margin-top:-6px; transition:all 0.3s;}
.footer .ft_logo .family .family_btn.active{background-color:var(--mainColor1); border-color:var(--mainColor1); color:#fff;}
.footer .ft_logo .family .family_btn.active:after{transform:rotate(45deg);}
.footer .ft_logo .family .family_list{width:100%; padding:10px 15px; border-radius:15px; background-color:#fff; position:absolute; top:55px; left:0; z-index:99; display:none;}
.footer .ft_logo .family .family_list ul li{padding:10px 5px; border-bottom:1px dashed #ddd;}
.footer .ft_logo .family .family_list ul li:last-child{border-bottom:0;}
.footer .ft_logo .family .family_list ul li a{display:block; background:url('../img/main/aw_right.svg') no-repeat right center; background-size:8px; font-size:1.6rem;}
.footer .ft_logo .family .family_list ul li a:hover{font-weight:500;}

.footer .ft_info .txt p{font-size:1.6rem; color:rgba(255,255,255,0.6); margin-bottom:8px;}
.footer .ft_info .txt p:last-child{margin-bottom:0;}
.footer .ft_info .txt p span{display:inline-block; margin-right:10px;}
.footer .ft_info .txt p span:last-child{margin-right:0;}
.footer .ft_info .link{gap:20px;}
.footer .ft_info .link li{position:relative;}
.footer .ft_info .link li:after{content:''; width:1px; height:12px; background-color:rgba(255,255,255,0.3); position:absolute; top:5px; right:-11px;}
.footer .ft_info .link li:last-child::after{display:none;}
.footer .ft_info .link li a{display:block; font-size:1.6rem; font-weight:400; color:rgba(255,255,255,0.8);}
.footer .ft_info .link li a:hover{color:var(--mainColor1);}

.footer .ft_copy{padding:30px 0; margin-top:50px; border-top:1px solid rgba(255,255,255,0.2);}
.footer .ft_copy p{font-size:1.6rem; color:rgba(255,255,255,0.4); letter-spacing:-0.03em;}
.footer .ft_copy .secigo_box{line-height:0;}



/* RESPONSIVE */
@media screen and (max-width:1400px){
    /* ---------------------------------- *
        * HEADER
    * ---------------------------------- */
    .header .top .gnb ul{gap:25px;}
    .header .top .gnb ul li a{padding:35px 5px;}
    .header .top .menu{margin-left:30px;}
}


@media screen and (max-width:1280px){
    /* ---------------------------------- *
        * HEADER
    * ---------------------------------- */
    .header{padding:15px 0;}
    .header .top .gnb, .header .top .menu{display:none !important;}
    .header .top .m_menu_open{display:block;}

    
    /* ---------------------------------- *
        * SNB
    * ---------------------------------- */
    .snb_bg, .snb{display:none !important;}


    /* ---------------------------------- *
        * QUICK
    * ---------------------------------- */
    .quick{display:none !important;}


    /* ---------------------------------- *
        * FOOTER
    * ---------------------------------- */
    .footer{border-radius:30px 30px 0 0;}

    .footer .ft_info{flex-direction:column-reverse;}
    .footer .ft_info .link{margin-bottom:30px;}
}


@media screen and (max-width:1024px){
}


@media screen and (max-width:768px){
    /* ---------------------------------- *
        * COMMON
    * ---------------------------------- */
    .container{padding:0 4.5%;}


    /* ---------------------------------- *
        * HEADER
    * ---------------------------------- */
    .header .logo{max-width:260px;}
    .header .logo a img{height:40px;}


    /* ---------------------------------- *
        * MOBILE MENU
    * ---------------------------------- */
    .m_menu .m_top{padding:18px 20px;}
    .m_menu .m_top .m_menu_close img{width:20px;}

    .m_menu .m_gnb{height:calc(100% - 56px);}
    .m_menu .m_gnb .list .m_depth01{padding:18px 20px;}
    .m_menu .m_gnb .list .m_depth01 .arrow{padding:7px;}
    .m_menu .m_gnb .list .m_depth01 .arrow img{width:10px;}
    .m_menu .m_gnb .list .m_snb{padding:10px;}
    .m_menu .m_gnb .list .m_snb .m_depth02{padding:18px 20px;}
    .m_menu .m_gnb .list .m_snb .m_depth02 .arrow img{width:12px;}
    .m_menu .m_gnb .list .m_snb .m_depth03{padding:15px 15px 10px;}
    .m_menu .m_gnb .list .m_snb .m_depth03 dd{margin-bottom:8px;}


    /* ---------------------------------- *
        * FOOTER
    * ---------------------------------- */
    .footer .ft_logo{padding:60px 0 30px; align-items:center;}
    .footer .ft_logo h1 img{width:220px;}
    .footer .ft_logo .family .family_btn{width:170px; padding:15px 40px 15px 20px;}
    .footer .ft_logo .family .family_btn:after{width:11px; height:11px; right:20px;}
    .footer .ft_logo .family .family_list{top:50px;}

    .footer .ft_info .link{width:100%; margin-bottom:20px; gap:5px 25px; justify-content:center;}
    .footer .ft_info .link li:after{display:none;}
    .footer .ft_info .txt p{text-align:center;}

    .footer .ft_copy{padding:30px 0 60px; margin-top:30px; flex-direction:column; align-items:center; justify-content:center; row-gap:15px;}
    .footer .ft_copy P{text-align:center;}
}


@media screen and (max-width:480px){
    /* ---------------------------------- *
        * HEADER
    * ---------------------------------- */
    .header .logo{max-width:210px;}
    .header .logo a img{height:32px;}
    
    .header .top .m_menu_open img{width:24px;}
    

    /* ---------------------------------- *
        * FOOTER
    * ---------------------------------- */
    .footer .ft_logo{flex-direction:column; align-items:center; justify-content:center; row-gap:15px;}
}