@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	header, footer, main 관련 작성 css 파일입니다.

	** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다.

───────────────────────────────────────────────────────────*/

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	/** PC 일반 **/
    #wrap {position:relative;width:100%; overflow: clip;}
    #contents_wrap{padding:0 0 150px;}
    #contents_wrap, .w_custom{position: relative;width: calc(100% - 200px);margin:0 auto;box-sizing: border-box;}

    @media screen and (max-width:1780px) {
        #contents_wrap, .w_custom{width:calc(100% - 60px);}
    }
    @media screen and (max-width:1023px) {
        #contents_wrap, .w_custom{width:calc(100% - 30px);}
    }
	@media screen and (max-width:640px) {
		#contents_wrap {padding:0 0 100px;}
	}
    @media screen and (max-width:320px) {
        #contents_wrap, .w_custom{width:calc(100% - 20px);}
    }



/*───────────────────────────────────────────────────────────

	 HEADER | outline/header.html, outline/nav.html

───────────────────────────────────────────────────────────*/
    .skip_nav {position:relative;z-index:9999;}
    .skip_nav a {display:block;height:1px;width:1px;margin-bottom:-1px;overflow:hidden;font-size:12px;color:#fff;font-weight:bold;white-space:nowrap;text-align:center;}
    .skip_nav a:focus, .skip_nav a:active {height:auto;width:100%;padding:0;margin-bottom:0;position:absolute;left:0;top:0;}

    #header{position: fixed; top:0; left:0; width: 100%; z-index: 99; border-bottom: 1px solid rgba(217,217,217,0.5); box-sizing: border-box; background: var(--transparent); transition: all 0.4s;}
    #header .w_custom{display: flex; align-items: center; justify-content: space-between; width: calc(100% - 120px); height: 120px; z-index: 10;}
    #header .left_wrap{display: inline-flex; align-items: center; gap: 2.9vw; height: 100%;}
    #header .logo{font-size: 0; height: 100%;}
    #header .logo a{display: block; width: 253px; height: 100%; background: url('../images/skin/logo_wh.png') no-repeat left center; background-size: 100% auto; transition: all 0.4s;}
    #header .gnb{display: flex; height: 100%; font-size: var(--title-28); font-family: var(--font-type02); transition: all 0.4s;}
    #header .gnb > li{position: relative; font-size: 100%; height: 100%;}
    #header .gnb > li > a{display: flex;align-items: center;height: 100%;font-size:inherit;font-weight: 700;color: var(--black-color03);padding: 0 1.85vw; transition: all 0.4s;}
    #header .gnb .dep02{position: absolute; top:100%; left:50%; transform: translateX(-50%); padding:15px 0; width: max-content; background: var(--point-white); min-width: 150px; text-align: center; opacity: 0; pointer-events: none; clip-path: ellipse(0 0 at 50% 0); border: 1px solid rgba(217,217,217,0.5); border-top:0; transition: all 0.6s;font-size:var(--title-20);}
    #header .gnb .dep02 > li > a{display: block; font-size: 100%; font-weight: 500; color: var(--black-color03); padding:8px 25px; box-sizing: border-box; transition: all 0.4s;}

    #header .right_wrap{display: inline-flex; align-items: center; gap:20px;}
    #header .menu-trigger{position: relative; display: block; width: 30px; height: 26px;}
    #header .menu-trigger span{position: absolute; top:0; right:0; width: 100%; height: 2px; background: var(--black-color00); transition: all 0.4s;}
        #header .menu-trigger span:nth-child(2){top:calc(50% - 1px);}
        #header .menu-trigger span:nth-child(3){top:calc(100% - 2px);}
    #header .lang_sel{position: relative;font-size: var(--title-20); font-family: var(--font-type02); margin-right: 20px; transition: all 0.4s;}
    #header .lang_sel dt{font-size: inherit;}
    #header .lang_sel dt span{position: relative; display: flex; align-items: center; padding:0 20px; box-sizing: border-box; width:110px; height:50px; border:1px solid var(--border-color02); font-size:104%; font-weight: 400; color: var(--black-color05); transition: all 0.4s; cursor: pointer;font-family: var(--font-type02);}
    #header .lang_sel dt span:before{position: absolute;content:'';top:calc(50% - 2px);right:18px;width: 6px;height: 6px;border: 2px solid var(--transparent);border-bottom-color: var(--black-color05);border-right-color: var(--black-color05);transform:translateY(-50%) rotate(45deg);border-radius: 2px; transition: all 0.4s;}
        #header .lang_sel dt.on span:before{top:calc(50% + 2px); transform:translateY(-50%) rotate(45deg) scale(-1, -1);}
    #header .lang_sel dd{position: absolute; top:calc(100% - 1px); left:0; width: 100%; border:1px solid var(--border-color02); background: var(--point-white); box-sizing: border-box; padding:8px 0; opacity: 0; pointer-events: none; transition: all 0.4s;}
        #header .lang_sel:has(dt.on) dd{opacity: 1; pointer-events: all;}
    #header .lang_sel dd a{display: flex; padding:3px 18px; box-sizing: border-box; font-size: 80%; font-weight: 400; color: var(--black-color03);}
        #header .lang_sel dd a.on{color: var(--point-color01);}
    #header .nice_btn{display: flex; align-items: center; justify-content: center;box-sizing: border-box;font-size: var(--title-20);gap:20px; transition: all 0.4s;margin-right:30px;position: relative;}
        #header .nice_btn:before{display: inline-flex; content:''; width:44px; height:44px; /*background: url('../images/skin/nice_logo.svg') no-repeat center;*/background-size:auto 100%;}
    #header .nice_btn span{font-size:104%; font-weight: 500; color: var(--point-color01); transition: all 0.4s;}

    .scr_top{position: fixed;right:30px;bottom: 25px;z-index: 9;font-size: 0;width: 80px;height: 80px;display: flex;align-items: center;justify-content: center; opacity: 0; pointer-events: none; transition: all 0.4s;}
        .scr_top:before{position: absolute;content:'';top:50%;left:50%;transform: translate(-50%, -50%) rotate(-35deg);width: 125%;height: 70%;background: var(--point-color01);border-radius: 100%;}
        #header.on .scr_top{opacity: 1; pointer-events:all;}
    .scr_top img{position: relative;}


        /* color */
            #header :where(.gnb > li > a, .menu-trigger span, .nice_btn span), #header .lang_sel dt span:before{filter: var(--filter-white);}
            #header .lang_sel dt span{border-color: rgba(255,255,255,0.5); color: var(--point-white);}
            #header .nice_btn{border-color:var(--point-white);}

        /* over */
            @media screen and (min-width:1024px){
                #header:hover{background: var(--point-white );}
                #header:hover .logo a{background-image: url('../images/skin/logo.png');}
                #header:hover :where(.gnb > li > a, .menu-trigger span, .nice_btn span){filter: none;} 
                #header:hover .lang_sel dt span{border-color:var(--border-color02); color: var(--black-color05);}
                #header:hover .lang_sel dt span:before{filter:none;}
                #header:hover .nice_btn{border-color:var(--point-color01);}

                #header .gnb > li:hover > a{color: var(--point-color01);}
                #header .gnb > li:hover .dep02{opacity: 1; pointer-events: all; clip-path: ellipse(100% 100% at 50% 50%);}
                #header .gnb .dep02 > li > a:hover{color: var(--point-color01);}
            }

        /* on */
            #header.on{background: var(--point-white );}
            #header.on .logo a{background-image: url('../images/skin/logo.png');}
            #header.on :where(.gnb > li > a, .menu-trigger span, .nice_btn span){filter: none;} 
            #header.on .lang_sel dt span{border-color:var(--border-color02); color: var(--black-color05);}
            #header.on .lang_sel dt span:before{filter:none;}
            #header.on .nice_btn{border-color:var(--point-color01);}

    @media screen and (max-width:1780px){
        #header .w_custom{width: calc(100% - 60px);}
    }
	@media screen and (max-width:1600px){
		#header .nice_btn{flex-wrap:wrap;margin-right:0;}
		#header .nice_btn span{display: block;width:calc(100% - 64px);}
	}
	@media screen and (max-width:1400px){
		#header .gnb > li{font-size:89%;}
		#header .nice_btn{margin-right:0;}
		#header .nice_btn:before{width:30px;height:30px;}
		#header .nice_btn span{width:calc(100% - 50px);}
	}
    @media screen and (max-width:1300px){
        #header .logo a{width: 220px;}
		#header .gnb > li{font-size:80%;}
        #header .gnb > li > a{font-size: 100%;}
        #header .lang_sel{margin-right:0;}
		#header .lang_sel dt span{width:90px;padding:0 10px;}
		#header .lang_sel dt span:before{right:10px;}
		
    }
    @media screen and (max-width:1200px){
        #header .logo a{width: 200px;}
        #header .gnb > li > a{font-size: 90%; padding:0 1.5vw;}
		
		#header .nice_btn{gap:10px;}
		#header .nice_btn span{width:calc(100% - 40px);}
    }
    @media screen and (max-width:1023px){
        #header .w_custom{width: calc(100% - 30px); height: 110px;}
        #header .gnb{display: none;}
        #header .right_wrap{gap:15px;}
        #header .lang_sel{margin-right: 10px;}
        #header .nice_btn{height: 45px;}
        #header .lang_sel dt span{padding:0 15px; height: 45px;}

        .scr_top{right:15px;bottom: 20px; width: 70px; height: 70px;}
    }
    @media screen and (max-width:860px){
        #header .w_custom{height: 100px;}

        .scr_top{width: 65px; height: 65px;}
    }
    @media screen and (max-width:640px){
        #header .w_custom{height: 90px;}
        #header :is(.nice_btn){display: none;}

        .scr_top{width: 60px; height: 60px;}
    }
    @media screen and (max-width:479px){
        #header .w_custom{height: 80px;}
		#header .logo a{width:160px;}
        #header .menu-trigger{width: 28px; height: 24px;}
        
        .scr_top{width: 55px; height: 55px;}
        .scr_top img{width: 12px;}
    }
    @media screen and (max-width:320px){
        #header .w_custom{width: calc(100% - 20px);}
    }
/*───────────────────────────────────────────────────────────

	 ASIDE | outline/header.html, outline/nav.html

───────────────────────────────────────────────────────────*/
    body:has(#aside.on){overflow: hidden; touch-action: none;}
    #header:has(#aside.on) .logo a{background-image: url('../images/skin/logo_wh.png') !important;}
    #header:has(#aside.on) :where(.gnb, .nice_btn, .lang_sel){opacity: 0; pointer-events: none;}
    #header:has(#aside.on) .menu-trigger span{filter: var(--filter-white); top:50%; transform: translateY(-50%) rotate(45deg);}
    #header:has(#aside.on) .menu-trigger span:nth-child(2){opacity: 0;}
    #header:has(#aside.on) .menu-trigger span:nth-child(3){transform: translateY(-50%) rotate(-45deg);}
    #header:has(#aside.on) .scr_top{opacity: 0; pointer-events: none;}

    #header #aside{position: fixed; top:0; right:0; z-index:5; background: var(--gray-bg03); width: 100%; height: 100vh; clip-path: circle(0 at 100% 0); transition: all 1.2s;}
        #header #aside.on{clip-path: circle(150vmax at 100% 0);}
    #header #aside .cont{position: relative; width:calc(100% - 120px); margin:110px auto 0; box-sizing: border-box; padding-bottom: 120px; overflow-y: auto; height: calc(100% - 90px);}
    #header #aside .gnb{display: block; width: auto; height:auto; opacity: 1; pointer-events: all;}
    #header #aside .gnb > li{height: auto;}
    #header #aside .gnb > li > a{position: relative; font-size: inherit; padding:12px 0; filter: var(--filter-white);}
    #header #aside .gnb > li > a:has(+ ul):before{position: absolute;content:'';width:7px;height: 7px;border:2px solid var(--transparent);border-right-color: var(--point-white);border-bottom-color: var(--point-white);top: calc(50% - 2px);right: 2px;transform: translateY(-50%) rotate(45deg);border-radius: 2px;transition: all 0.4s;}
        #header #aside .gnb > li.on > a:has(+ ul):before{top:calc(50% + 4px); transform: translateY(-50%) rotate(45deg) scale(-1,-1);}
    #header #aside .gnb .dep02{position: relative; top:auto; left:auto; width: 100%; min-width: auto; transform: none; display:none; transition: all; text-align: left; border:0; opacity: 1; pointer-events: all; clip-path: none; margin:5px 0 15px;}
    #header #aside :is(.nice_btn, .lang_sel){opacity: 1; pointer-events: all;}
    #header #aside .nice_btn{display: flex; width: 100%; margin-top:50px;}
    #header #aside .nice_btn{border-color:var(--point-white);}
    #header #aside .nice_btn span{filter: var(--filter-white);}
    #header #aside .lang_sel{display:block; width: 100%; margin:20px 0 0;}
    #header #aside .lang_sel dt{width: 100%;}
    #header #aside .lang_sel dt span{width: 100%; border-color:rgba(255,255,255,0.5); color: var(--point-white);}
    #header #aside .lang_sel dt span:before{filter:var(--filter-white);}

    @media screen and (max-width:1780px){
        #header #aside .cont{width: calc(100% - 60px);}
    }
    @media screen and (max-width:1023px){
        #header #aside .cont{width: calc(100% - 30px);}
    }
    @media screen and (max-width:479px){
        #header #aside .cont{margin-top:100px;}
    }

/*───────────────────────────────────────────────────────────

	 MAIN | index.html

───────────────────────────────────────────────────────────*/
    #wrap:has(.main_visual) #contents_wrap{width: 100%; padding:0;}
			
	/* 비주얼 */
        .main_visual {position:relative;}
		.main_visual .slick-slide {position: relative; height: 980px; box-sizing: border-box; overflow: hidden;}
        .main_visual .slick-slide .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        .main_visual .thumb{width: 100%; height: 100%; background: no-repeat center; background-size: cover; transition: all 3s;}
            .main_visual .active .thumb{transform: scale(1.1);}
        .main_visual .txt_box{position: absolute;top: 46.5%;left:50%;transform: translate(-50%, -50%);z-index: 3;font-size: var(--title-20);color: var(--point-white);}
        .main_visual .txt_box h2{font-size: 350%; font-weight: 600; font-family: var(--font-type02); line-height: 1.15; height: 80px; padding-top: 80px;}
            .main_visual .txt_box h2 + h6{margin-top: 37px;}
        .main_visual .txt_box h6{font-size: 110%;font-weight: 300;line-height: 1.5;height: 70px; padding-top: 70px; letter-spacing: -0.04em;}

        .main_visual .txtAni{overflow: hidden; box-sizing: border-box; transition: all 1.2s; transition-delay: 0.2s;}
            .main_visual .txtAni + .txtAni{transition-delay: 0.4s;}
        .main_visual .active .txtAni{padding-top:0;}

        .main_visual .controller{position: absolute;display: flex;align-items: center;left:50%;bottom: 8.2%;transform: translateX(-50%);padding-left: 3px; z-index: 9;}
        .main_visual .info_wrap{display: flex;gap:30px;align-items: center;width: 300px;padding-top: 18px;}
        .main_visual .slick-arrow{font-size: 0;width: 21px;height: 21px;border: 3px solid var(--transparent);border-top-color: var(--point-white);border-left-color: var(--point-white);transform: rotate(-45deg);border-radius: 3px;}
        .main_visual .slick-arrow.next{transform: rotate(-45deg) scale(-1,-1);margin-left: -13px;margin-right: 13px;}
        .main_visual .count{font-size: var(--title-20); font-family: var(--font-type02);}
        .main_visual .count span{font-size: inherit; font-weight: 300; color: var(--point-white);}
        .main_visual .count .slideCountItem{font-weight: 600;}
        .main_visual .slickBtn{position: relative; font-size: 0; width: 14px; height: 20px;}
            .main_visual .slickBtn:before, .main_visual .slickBtn:after{position: absolute; content:''; width: 3px; height: 100%; top:0; left:0; background: var(--point-white);}
            .main_visual .slickBtn:after{left:calc(100% - 3px);}
            .main_visual .slickBtn.play:before{width: auto;height:auto;background: none;border: 9px solid var(--transparent);border-left: 13px solid var(--point-white);}
            .main_visual .slickBtn.play:after{opacity: 0;}
        .main_visual .dots_wrap{width: calc(100% - 300px); display: flex;}
        .main_visual .slick-dots{width: 100%; display: flex; gap:40px;}
        .main_visual .slick-dots li{width: 100%; font-size: var(--title-20);}
        .main_visual .slick-dots li button{position: relative;display: flex;align-items: center;justify-content: flex-start;font-size: 110%;font-weight: 600;color: var(--point-white);border-bottom: 2px solid rgba(255,255,255,0.5);width: 100%;text-align: left;height: 72px;letter-spacing: -0.03em;}
            .main_visual .slick-dots li button:before{position: absolute; content:''; width:100%; height:0; background: no-repeat center; background-size: cover; bottom:calc(100%); left:0; transition: all 0.4s;}
            .main_visual .slick-dots li:nth-child(1) button:before{background-image: url('../images/skin/main_visual_roll01.jpg');}
            .main_visual .slick-dots li:nth-child(2) button:before{background-image: url('../images/skin/main_visual_roll02.jpg');}
            .main_visual .slick-dots li:nth-child(3) button:before{background-image: url('../images/skin/main_visual_roll03.jpg');}
            .main_visual .slick-dots li:nth-child(4) button:before{background-image: url('../images/skin/main_visual_roll04.jpg');}

            .main_visual .slick-dots li button:after{position: absolute; content:''; width:0; height: 2px; left:0; bottom:-2px; background: var(--point-white); transition:none;}
                .main_visual .slick-dots li.on button:after{width: 100%; transition: all 7.4s; transition-timing-function: linear;}
                .main_visual:has(.slickBtn.play) .slick-dots li.on button:after{width: 100%; transition: none;}

            /* over */
                @media screen and (min-width:1024px){
                    .main_visual .slick-dots li button:hover:before{height: 204px;}
                }
		@media screen and (max-width:1120px){
			.main_visual .txt_box h6 br{display:none;}
		}
        @media screen and (max-width:1023px){
            .main_visual .slick-slide{height: 95.5vw; min-height: 600px;}
            .main_visual .txt_box h2 + h6{margin-top:30px;}
			.main_visual .txt_box h6{height:105px;padding-top:105px;}	

            .main_visual .info_wrap{width: 250px;}
            .main_visual .dots_wrap{width: calc(100% - 250px);}
            .main_visual .slick-dots li button{height: 65px;}
        }
        @media screen and (max-width:860px){
            .main_visual .slick-slide{height: 95.5vw; min-height: 600px;}
            .main_visual .txt_box h2 + h6{margin-top:30px;}

            .main_visual .controller{flex-direction: column; gap:15px;}
            .main_visual .info_wrap{width: 100%; padding-top: 0;}
            .main_visual .dots_wrap{width: 100%;}
            .main_visual .slick-dots{gap:30px;}
        }
		@media screen and (max-width:767px){
			.main_visual .txt_box h6{height:120px;padding-top:120px;}
		}
        @media screen and (max-width:640px){
            .main_visual .txt_box h2{font-size: 320%;}
                .main_visual .txt_box h2 + h6{margin-top:25px;}
            .main_visual .txt_box h6{font-size: 95%;}

            .main_visual .info_wrap{gap:25px;}
            .main_visual .slick-arrow{width: 16px; height: 16px; border-radius: 1px;}
            .main_visual .slick-dots{gap:20px;}
            .main_visual .slick-dots li button{font-size: 0; height: 20px;}
        }
        @media screen and (max-width:479px){
            .main_visual .txt_box h2{font-size:240%;height:60px; padding-top:60px;}
                .main_visual .txt_box h2 + h6{margin-top:20px;}
            
            .main_visual .txt_box h6{height:140px; padding-top: 140px;}

            .main_visual .info_wrap{gap:20px;}
            .main_visual .controller{bottom: 25px;}
            .main_visual .slick-arrow{width: 15px; height: 15px;}
            .main_visual .slickBtn{width: 12px; height: 18px;}
            .main_visual .slick-dots{gap:15px;}           
        }
        @media screen and (max-width:360px){
            .main_visual .txt_box h6{font-size: 90%;}
            .main_visual .slick-dots{gap:10px;}
        }
		@media screen and (max-width:350px){
			.main_visual .txt_box h2{font-size:237%;}
			.main_visual .slick-slide[data-slick-index="2"] h2{height:100px;padding-top:100px;}
			.main_visual .slick-slide[data-slick-index="2"].active h2{padding-top:0;}
		}

    /* 공통 */
        .main_title{position: relative; font-size: var(--title-20); box-sizing: border-box;}
            .main_title.cen{text-align: center;}
            .main_title.hd{margin-bottom: 43px;}
        .main_title h2{font-size: 300%;font-weight: 700;color: var(--black-color00);line-height: 1.2; font-family: var(--font-type02); letter-spacing: -0.03em;}
        .main_title h3{font-size: 250%;font-weight: 300;color: var(--black-color00);line-height: 1.5; letter-spacing: -0.04em;}
            .main_title h3 + p{margin-top: 28px;}
        .main_title h3 strong{font-weight: 600;letter-spacing: 0.03em;}
        .main_title p{font-size: inherit;font-weight: 400;color: var(--black-color00);line-height: 1.6;letter-spacing: -0.03em;}
        .main_title p + .more_wrap{margin-top: 70px;}
        

        .more_wrap{position: relative; font-size: var(--title-20); box-sizing: border-box; text-align: center;}
        .more_btn{position: relative; font-size: inherit; font-weight: 400; color: var(--point-white); display: inline-flex; justify-content: center; align-items: center; width: 60px; height: 60px; background: var(--point-color01); border-radius: 30px; transition: all 0.4s;}
        .more_btn span{position: absolute;top:50%;right: 46px;transform: translateY(-50%);opacity: 0;transition:all 0.4s;}
        .more_btn:after{display:inline-flex;content:'';width: 9px;height: 9px;border:2px solid var(--transparent);border-top-color: var(--point-white);border-right-color: var(--point-white);transform: rotate(45deg) translate(-1px, 2px);border-radius: 2px;}

            @media screen and (min-width:1024px){
                .more_btn:hover{padding-left: 100px;}
                .more_btn:hover span{opacity: 1;}
            }
        @media screen and (max-width:1680px){
            .main_title.hd{margin-bottom: 38px;}
        }
        @media screen and (max-width:1200px){
            .main_title h2{font-size: 280%;}
        }
        @media screen and (max-width:1023px){
            .main_title.hd{margin-bottom: 33px;}
            .main_title h2{font-size: 260%;}
            .main_title p + .more_wrap{margin-top:60px;}

            .more_btn{width: 55px; height: 55px;}
        }
        @media screen and (max-width:860px){
            .main_title.hd{margin-bottom: 28px;}
            .main_title h3{font-size: 220%;}
            .main_title h3 + p{margin-top:23px;}
            .main_title p + .more_wrap{margin-top:50px;}

            .more_btn{width: 50px; height: 50px;}
        }
        @media screen and (max-width:640px){
            .main_title.hd{margin-bottom: 23px;}
            .main_title h2{font-size: 240%;}
            .main_title h3{font-size: 200%;}
            .main_title h3 + p{margin-top:18px;}
            .main_title p + .more_wrap{margin-top:40px;}

            .more_btn{width: 45px; height: 45px;}
        }
        @media screen and (max-width:479px){
            .main_title.hd{margin-bottom: 18px;}
            .main_title h2{font-size: 220%;}
            .main_title h3{font-size: 170%;}
            .main_title h3 + p{margin-top:13px;}
            .main_title p{font-size: 90%;}
            .main_title p + .more_wrap{margin-top:30px;}

            .more_btn{width: 40px; height: 40px;}
            .more_btn:after{width: 7px; height: 7px;}
        }
        @media screen and (max-width:431px){
            .main_title h2{font-size: 200%;}
        }
        @media screen and (max-width:360px){
            .main_title h2{font-size: 240%;}
            .main_title h3{font-size: 150%;}
            .main_title p{font-size: 80%;}
        }

    /* 어바웃 */
        .main_about{position: relative;padding: 100px 0 115px;box-sizing: border-box;background:url('../images/skin/main_about_bg.jpg') no-repeat bottom center;background-size: cover; overflow: hidden;}
            .main_about:before, .main_about:after{position: absolute;content: '';width:45px;height: 45px;border-radius: 100%;background: var(--point-grad01);left: 16%;bottom: 22%; opacity: 0;}
            .main_about:after{width: 20px;height: 20px;left:auto;bottom:auto;right: 22%;top: 32%;}
            .main_about:has(.main_title.aos-animate):before, .main_about:has(.main_title.aos-animate):after{opacity: 1; transition: all 1s; transition-delay: 1.2s;}

            .main_about:before, .main_about:after{animation-name: UpDwn; animation-duration:2s; animation-iteration-count:infinite; animation-direction:alternate;  animation-fill-mode: forwards; transition-timing-function:linear;}
            .main_about:after{animation-name: UpDwn02; animation-duration:3s;}
            @keyframes UpDwn {0% {transform:translateY(-50px);}100% {transform:translateY(0);}}
            @keyframes UpDwn02 {0% {transform:translateY(30px);}100% {transform:translateY(-30px);}}

        .main_about .w_custom{position: static;}
            .main_about .w_custom:before, .main_about .w_custom:after{position: absolute;content:'';width: 120px;height: 120px;background: var(--point-grad02);border-radius: 100%;filter: blur(40px);left: 10%;top: 35%;opacity: 0;}
            .main_about .w_custom:after{width: 104px;height: 104px;left:auto;bottom:auto;right: 3%;top: 43%;}
            .main_about:has(.main_title.aos-animate) .w_custom:before, .main_about:has(.main_title.aos-animate) .w_custom:after{opacity: 0.4;}

            .main_about:has(.main_title.aos-animate) .w_custom:before, .main_about:has(.main_title.aos-animate) .w_custom:after{animation-name: UpScale; animation-duration:2s; animation-iteration-count:infinite; animation-direction:alternate;  animation-fill-mode: forwards; transition-timing-function:linear;}
            @keyframes UpScale {0% {transform:scale(1); opacity: 0.4; filter:blur(40px)} 70% {opacity: 1;} 100% {transform:scale(2.58); filter:blur(20px);}}

        .main_about .main_title{position: static;}
        .main_about .logo{display: flex;justify-content: center;height: 103px;font-size: 0;position: relative;}
        .main_about .logo img{position: absolute;top: calc(100% + 200px);left:50%;transform: translate(calc(-50% - 0.5px), calc(-50% - 0.5px));height: 295px;max-height: none; z-index: 5;}
        .main_about .logo + h3{margin-top: 41px;}
        .main_about .main_title.aos-animate .logo img{top: 50%;height: 100%; transition: all 1s; transition-delay: 0.6s;}
        .main_about .main_title h3{height:200px; padding-top:200px; overflow: hidden; box-sizing: border-box; }
            .main_about .main_title.aos-animate h3{padding-top:0; transition: all 1.2s; transition-delay: 1.2s;} 
        .main_about .main_title p{height: 32px; padding-top:32px; overflow: hidden; box-sizing: border-box; }
            .main_about .main_title.aos-animate p{padding-top:0; transition: all 1s; transition-delay: 1.4s;}
        .main_about .main_title .more_wrap{opacity: 0; transform: translateY(70px); }
            .main_about .main_title.aos-animate .more_wrap{opacity: 1; transform: translate(0); transition: all 1s; transition-delay: 1.2s;}

        @media screen and (max-width:1400px){
            .main_about:before{left: 70px;}
            .main_about:after{right:100px;}
        }
        @media screen and (max-width:1023px){
            .main_about:before{left: 30px;}
            .main_about:after{right:50px;}

            .main_about .w_custom:before{width: 11.5vw; height: 11.5vw;}}
            .main_about .w_custom:after{width: 10vw; height: 10vw;}
			
			.main_about .main_title h3{font-size:190%;height:170px;padding-top:170px;}
			.main_about .main_title p{height:70px;padding-top:70px;}
        }
        @media screen and (max-width:860px){
            .main_about:before{left:15px; bottom:15%; width: 40px; height: 40px;}
            .main_about:after{top:25%; width: 15px; height: 15px;}
            .main_about .logo + h3{margin-top: 30px;}
            .main_about .main_title h3{height: 120px; padding-top: 120px;}
            .main_about .main_title p{height: 58px; padding-top:58px;}
            .main_about .main_title p br.for_m{display: block;}
            .main_about .logo img{top:calc(100% + 150px);}
        }
		@media screen and (max-width:767px){
			.main_about .main_title h3{font-size:170%;}
		}
        @media screen and (max-width:640px){
            .main_about:before{left:15px; width: 35px; height: 35px;}
            .main_about:after{right:30px; width: 12px; height: 12px;}
            @keyframes UpDwn {0% {transform:translateY(-30px);}100% {transform:translateY(0);}}
            @keyframes UpDwn02 {0% {transform:translateY(15px);}100% {transform:translateY(-15px);}}

            .main_about .logo + h3{margin-top: 25px;}
            .main_about .main_title h3{height: 180px; padding-top: 180px;}
            .main_about .main_title h3 br:not(.for_m){display:none}
            .main_about .main_title p{height: 55px; padding-top:55px;}
            .main_about .logo{height: 80px;}
            .main_about .logo img{top:calc(100% + 120px); height: 250px;}
        }
		@media screen and (max-width:550px){
			.main_about .main_title p{height:84px;padding-top:84px;}
		}
        @media screen and (max-width:479px){
            .main_about{padding:70px 0 85px;}
            .main_about:before{width: 30px; height: 30px;}
            .main_about:after{right:15px; width: 10px; height: 10px;}
            .main_about .main_title h3{height: 135px;padding-top: 135px;font-size:130%;}

            .main_about .logo{height: 60px;}
            .main_about .logo img{top:calc(100% + 22vw); height: 44vw;}
        }
        @media screen and (max-width:360px){
			.main_about .main_title h3{font-size:120%;}
        }
		@media screen and (max-width:315px){
			.main_about .main_title h3{height:190px;padding-top:190px;}
		}

    /* 제품 */
        .main_product{padding:160px 0;}
        .main_product .prod_list{display: flex; flex-wrap: wrap; gap:20px;}
        .main_product .prod_list > li{position: relative; width: calc(100% / 4 - 15px); box-sizing: border-box;}
        .main_product .prod_list .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        .main_product .prod_list .arw{position: absolute; left:40px; bottom:40px; width: 60px; height: 60px; border-radius: 100%; background: rgba(0,0,0,0.6); border-radius: 100%; opacity: 0; transition: all 0.4s; transform: translate(15px, 15px);}
            .main_product .prod_list .arw:before{position: absolute;content:'';width:8px;height: 8px;border:2px solid var(--transparent);border-top-color:var(--point-white);border-right-color:var(--point-white);top: calc(50%);right: calc(50% - 9px);transform: translate(-50%, -50%) rotate(45deg);border-radius: 2px;}
        .main_product .prod_list .thumb{position: relative; width: 100%; padding-bottom: 100%; font-size: 0; overflow: hidden;}
        .main_product .prod_list .thumb img{position: absolute; width: 100%; height: 100%; object-fit: cover; top:50%; left:50%; transform: translate(-50%, -50%); transition: all 0.4s;}
        .main_product .prod_list .thumb img[alt="logo"]{width: 100%; max-width: 187px; height: auto;}
        .main_product .prod_list .info{position: absolute;top: 51px;left:40px;z-index: 3;font-size: var(--title-20);font-family: var(--font-type02); width: calc(100% - 80px);}
        .main_product .prod_list .info h2{font-size: 300%; font-weight: 700; color: var(--black-color00); line-height: 1.1; letter-spacing: -0.03em;}
        .main_product .prod_list .info h3{font-size: 200%; font-weight: 700; color: var(--black-color03);  line-height: 1.25; letter-spacing: -0.03em;}
        .main_product .prod_list .info h3 strong{font-weight: inherit; color: var(--point-color01);}
        .main_product .prod_list .info h3 em{font-weight: inherit; color: var(--point-color02);}
        .main_product .prod_list .info h4{font-size: 170%;font-weight: 600;color: var(--point-white);line-height: 1.35;letter-spacing: -0.03em;display: flex;flex-wrap: wrap;gap:8px 15px;align-items: baseline;}
            .main_product .prod_list .info h4 + p{margin-top:16px;}
        .main_product .prod_list .info h4 small{font-size: 64.2%; font-weight: 500;}
        .main_product .prod_list .info p{font-size: inherit; font-weight: 300; color: var(--point-white); line-height: 1.5; letter-spacing: -0.03em; opacity: 0; transition: all 0.4s; font-family: var(--font-type01);}

            .main_product .prod_list > li.last .thumb{background: var(--point-color01);}
            .main_product .prod_list .info:has(h2){top:0; left:0;}
            .main_product .prod_list .info:has(h3){top:auto;bottom: 65px;}
            .main_product .prod_list > li.last .info{top:auto;bottom: 51px;font-family: var(--font-type01);}
            .main_product .prod_list > li.last .info h4{font-weight: 400;font-family: var(--font-type01);line-height: 1.45;}
            .main_product .prod_list > li.nth3 .info{font-family: var(--font-type01);}
            .main_product .prod_list > :is(li.nth3, li.nth7) .info :is(h4, p){color: var(--black-color03);}
            .main_product .prod_list > :is(li.nth3, li.nth7) .info p{font-weight: 400;}

            /* over */
                @media screen and (min-width:1024px){
                    .main_product .prod_list > li:hover .thumb img{transform:translate(-50%, -50%) scale(1.07);}
                    .main_product .prod_list > li:hover .arw{opacity: 1; transform: translate(0);}}
                    .main_product .prod_list > li:hover .info p{opacity: 1;}
                }

        @media screen and (max-width:1680px){
            .main_product .prod_list > li{width: calc(100% / 3 - 13.34px);}
        }
        @media screen and (max-width:1200px){
            .main_product .prod_list{gap:15px;}
            .main_product .prod_list > li{width: calc(100% / 3 - 10px);}
            .main_product .prod_list .info{top:45px; left:35px; width: calc(100% - 70px);}
            .main_product .prod_list .info:has(h3){bottom:60px;}
            .main_product .prod_list > li.last .info{bottom:45px;}
            .main_product .prod_list .info h2{font-size: 280%;}
            .main_product .prod_list .info h3{font-size: 180%;}
            .main_product .prod_list .info h4{font-size: 150%;}
        }
        @media screen and (max-width:1023px){
            .main_product{padding:120px 0;}
            .main_product .prod_list > li{width: calc(100% / 3 - 10px);}
            .main_product .prod_list .info{top:40px; left:30px; width: calc(100% - 60px);}
            .main_product .prod_list .info:has(h3){bottom:55px;}
            .main_product .prod_list > li.last .info{bottom:40px;}
            .main_product .prod_list .info h2{font-size: 260%;}
            .main_product .prod_list .info h3{font-size: 160%;}
            .main_product .prod_list .info h4{font-size: 130%;}
            .main_product .prod_list .info p{opacity: 1;}
        }
        @media screen and (max-width:860px){
            .main_product .prod_list > li{width: calc(100% / 2 - 7.5px);}
            .main_product .prod_list .info:has(h3){bottom:50px;}
            .main_product .prod_list > li.last .info{bottom:35px;}
            .main_product .prod_list .info h4{font-size: 170%;}
        }
        @media screen and (max-width:640px){
            .main_product{padding:100px 0;}
            .main_product .prod_list .info h2{font-size: 240%;}
            .main_product .prod_list .info{top:35px;}
            .main_product .prod_list .info:has(h3){bottom:45px;}
            .main_product .prod_list > li.last .info{bottom:35px;}
            .main_product .prod_list .info h4{font-size: 130%;}
            .main_product .prod_list .info h4 + p{margin-top:12px;}
            .main_product .prod_list .info p{font-size: 90%;}
        }
		@media screen and (max-width:550px){
			.main_product .prod_list .thumb{padding-bottom:135%;}
		}
        @media screen and (max-width:479px){
            .main_product{padding:70px 0;}
            .main_product .prod_list .info h2{font-size: 220%;}
            .main_product .prod_list > li{width:100%;}
            .main_product .prod_list > li:not([class^="nth"],:first-child){display: none;}
            .main_product .prod_list > li:not(.last) .thumb:not(:has(img)){padding-bottom: 0;}
            .main_product .prod_list > li:not(:has(.thumb img)):not(.last) .info{position: static;}
            .main_product .prod_list .info:has(h3){bottom:40px;}
            .main_product .prod_list .info h4{font-size: 170%;}
            .main_product .prod_list .info p{font-size: 88%;}
			.main_product .prod_list .thumb{padding-bottom:100%;}
            .main_product .prod_list .thumb img{top:0; left:0; transform:none;}
        }
        @media screen and (max-width:431px){
            .main_product .prod_list .info h2{font-size: 200%;}
        }

    /* 게시판 */
        .main_borard .bd_list{border-top: 2px solid var(--black-color00);}
        .main_borard .bd_list > li{position: relative;padding: 30px 20px;border-bottom: 1px solid var(--border-color01);box-sizing: border-box;display: flex;align-items: center; background: var(--point-white); transition: all 0.4s;}
            .main_borard .bd_list > li:before{position: absolute; content:''; width:0; height:1px; background: var(--point-color01); left:0; bottom:-1px; opacity: 0; transition: all 0.6s;}
        .main_borard .bd_list .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        .main_borard .bd_list .thumb{font-size: 0; width: 280px; height: 160px;}
        .main_borard .bd_list .thumb img{width: 100%; height: 100%; object-fit: cover;}
        .main_borard .bd_list .info{position: relative; width: calc(100% - 280px);padding: 0 300px 0 80px;box-sizing: border-box;}
        .main_borard .bd_list .desc{font-size: var(--title-20);display: flex;flex-direction: column;gap: 22px;} 
        .main_borard .bd_list .desc dt{display: block;font-size: 110%;font-weight: 400;color: var(--black-color00);letter-spacing: -0.03em;font-family: var(--font-type01);overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
        .main_borard .bd_list .desc .name{display: inline-flex;align-items: center;justify-content: center;font-family: var(--font-type02);color: var(--point-color01);border:1px solid var(--point-color01);padding: 0 5px;height: 30px;width: 50px;box-sizing: border-box;margin-right: 12px;}
        .main_borard .bd_list .desc dd{font-size: 90%;font-weight: 400;color: var(--black-color07);letter-spacing: -0.03em;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
        .main_borard .bd_list .arw{position: absolute; top:50%; right:60px; width: 60px; height: 60px; background: var(--gray-bg01); border-radius: 100%; transform: translateY(-50%); transition: all 0.4s;}
            .main_borard .bd_list .arw:before{position: absolute;content:'';width:8px;height: 8px;border: 2px solid var(--transparent);border-top-color: var(--black-color06);border-right-color: var(--black-color06);top:50%;left: calc(50% - 8px);transform: translateY(-50%) rotate(45deg);border-radius: 2px; transition: all 0.4s;}

            /* over */
                @media screen and (min-width:1024px){
                    .main_borard .bd_list > li:hover{background: var(--gray-bg02);}
                    .main_borard .bd_list > li:hover:before{width: 100%; opacity: 1;}
                    .main_borard .bd_list > li:hover .arw{background: var(--point-color01);}
                    .main_borard .bd_list > li:hover .arw:before{filter: var(--filter-white);}

                }

        @media screen and (max-width:1680px){
            .main_borard .bd_list .info{padding:0 17.5vw 0 4.7vw;}
            .main_borard .bd_list .arw{right:3.5vw;}
        }
        @media screen and (max-width:1023px){
            .main_borard .bd_list .thumb{width: 27vw;height: 13.5vw; min-height: 100px;}
            .main_borard .bd_list .info{width: calc(100% - 27vw);}
            .main_borard .bd_list .desc{gap:17px;}
            .main_borard .bd_list .desc .name{width: 45px; height: 28px;}
            .main_borard .bd_list .desc dt{font-size: 100%;}
            .main_borard .bd_list .desc dd{font-size: 80%;}
            .main_borard .bd_list .arw{width: 55px; height: 55px;}
        }
        @media screen and (max-width:860px){
            .main_borard .bd_list .info{padding:0 100px 0 25px;}
            .main_borard .bd_list .desc{gap:17px;}
            .main_borard .bd_list .arw{right:0; width: 50px; height: 50px;}
        }
        @media screen and (max-width:640px){
            .main_borard .bd_list > li{flex-direction: column; gap:20px; align-items: flex-start; padding:25px 0}
            .main_borard .bd_list .thumb{width: 260px; height: 140px;}
            .main_borard .bd_list .info{width: 100%; padding:0 100px 0 0;}
            .main_borard .bd_list .desc{gap:12px;}
            .main_borard .bd_list .desc .name{width: 40px; height: 26px;}
            .main_borard .bd_list .arw{width: 45px; height: 45px;}
            .main_borard .bd_list .arw:before{width: 6px; height: 6px;}
        }
        @media screen and (max-width:479px){
            .main_borard .bd_list > li{padding:20px 0;}
            .main_borard .bd_list .thumb{width: 100%;}
            .main_borard .bd_list .info{width: 100%; padding:0;}
            .main_borard .bd_list .desc .name{width: 38px; height: 23px;}
            .main_borard .bd_list .desc dt{font-size: 90%;}
            .main_borard .bd_list .desc dd{font-size: 75%;}
            .main_borard .bd_list .arw{display: none;}
        }

    /* 고객문의 */
        .main_inquiry{padding:160px 0; box-sizing: border-box;}
        .main_inquiry .bnr_wrap {position: relative;background: url('../images/skin/main_inquiry_bnr.jpg') no-repeat center;background-size: cover;box-sizing: border-box;display: flex;align-items: center;padding: 104px 120px;}
        .main_inquiry .bnr_wrap a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; }
        .main_inquiry .bnr_wrap .desc{font-size: var(--title-20); display: flex; flex-wrap: wrap; gap:10px 40px; align-items: center;}
        .main_inquiry .bnr_wrap .desc dt{font-size: 200%; font-weight: 700; color: var(--black-color00); font-family: var(--font-type02); letter-spacing: -0.03em; line-height: 1.3;}
        .main_inquiry .bnr_wrap .desc dd{font-size: inherit; font-weight: 400; color: var(--black-color04); letter-spacing: -0.03em; line-height: 1.4; }

        @media screen and (max-width:1023px){
            .main_inquiry{padding:120px 0;}
            .main_inquiry .bnr_wrap{padding:100px 11.5vw;}
        }
        @media screen and (max-width:640px){
            .main_inquiry{padding:100px 0;}
            .main_inquiry .bnr_wrap{padding:7vw 30px; background-image: url('../images/skin/main_inquiry_bnr_m.jpg');}
            .main_inquiry .bnr_wrap .desc{flex-direction: column; width: 100%; align-items: flex-start;}
            .main_inquiry .bnr_wrap .desc dt{font-size: 170%;}
            .main_inquiry .bnr_wrap .desc dd{font-size: 90%;}
			.main_inquiry .bnr_wrap .desc dd br{display: none;}
			.main_inquiry .bnr_wrap .desc dd .for_m{display: inline;}
        }
        @media screen and (max-width:479px){
            .main_inquiry{padding:70px 0;}
            .main_inquiry .bnr_wrap{padding:7vw 25px;}
            .main_inquiry .bnr_wrap .desc dt{font-size: 135%;}
            .main_inquiry .bnr_wrap .desc dd{font-size: 82%;}
			
        }

    /* 파트너스 */
        .main_partners{background: var(--gray-bg01); border-top:1px solid var(--border-color01); padding:40px 0;}
        .main_partners .logoSwiper{position: relative; overflow: hidden;}
        .main_partners .logoSwiper .swiper-wrapper{transition-timing-function: linear;}
        .main_partners .logoSwiper .swiper-slide{width: auto; display: flex; align-items: center; justify-content: center; width: 170px; height: 70px;}

        @media screen and (max-width:1023px){
            .main_partners{padding:35px 0;}
            .main_partners .logoSwiper .swiper-slide{width: auto; display: flex; align-items: center; justify-content: center; width: 160px; height: 65px;}
        }
        @media screen and (max-width:860px){
            .main_partners{padding:30px 0;}
            .main_partners .logoSwiper .swiper-slide{width: auto; display: flex; align-items: center; justify-content: center; width: 150px; height: 60px;}
        }
        @media screen and (max-width:640px){
            .main_partners{padding:25px 0;}
            .main_partners .logoSwiper .swiper-slide{width: auto; display: flex; align-items: center; justify-content: center; width: 140px; height: 55px;}
        }
        @media screen and (max-width:479px){
            .main_partners{padding:20px 0;}
            .main_partners .logoSwiper .swiper-slide{width: auto; display: flex; align-items: center; justify-content: center; width: 120px; height: 50px;}
        }


/*───────────────────────────────────────────────────────────

	 FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative;background: var(--gray-bg03);padding: 85px 0 160px;box-sizing: border-box;}
    #footer .w_custom{padding-right: 250px;}
    #footer .link_list{position: absolute;top:82px;right:0;}
    #footer .link_list > li{font-size: var(--title-20); text-align: right;}
        #footer .link_list > li + li{margin-top: 26px;}
    #footer .link_list > li > a{font-size: 90%;font-weight: 300;color: var(--border-color01);}
    #footer .link_list > li > a strong{font-weight: 400;color: var(--point-white);}
    #footer .ftr_title{position: relative;font-size: var(--title-20);box-sizing: border-box;margin-bottom: 80px;}
    #footer .ftr_title h3{font-size: 300%; font-weight: 600; color: var(--point-white); font-family: var(--font-type02); line-height: 1.1; letter-spacing: -0.03em;}
    #footer .ftr_title h3 em{font-weight: inherit; color: var(--point-color01);}
    #footer .ftr_title h3 strong{font-weight: inherit; color: var(--point-color02);}
    #footer .logo{font-size: 0;margin-bottom: 59px;}
    #footer .addr_list > li{display: flex; flex-wrap: wrap; gap:0 30px}
    #footer .addr_list .desc{display: inline-flex; font-size: var(--title-20); color: var(--point-white);}
    #footer .addr_list .desc :where(dt, dd){font-size: 85%;font-weight: 300;line-height: 1.88;letter-spacing: -0.03em;}
    #footer .copyright{font-size: var(--title-20);font-family: var(--font-type02);color: var(--border-color01);margin-top: 38px;display: flex;flex-wrap: wrap;gap:0 30px;}
    #footer .copyright :where(dt, dd){font-size: 80%;font-weight: 300;line-height: 1.88;letter-spacing: -0.03em;}
    #footer .family_site{position: absolute;right:0;top:17px;width: 220px;font-size: var(--title-20);font-family: var(--font-type02);z-index: 5;}
    #footer .family_site dt{width: 100%;}
    #footer .family_site dt span{position: relative;display: flex;align-items: center;width: 100%;height: 46px;border:1px solid rgba(255,255,255,0.3);box-sizing: border-box;padding: 0 50px 0 20px;font-size: 85%;font-weight: 300;color: var(--point-white);cursor: pointer;line-height: 1;}
        #footer .family_site dt span:before{position: absolute; content:''; width:6px; height: 6px; border:2px solid var(--transparent); border-top-color: var(--point-white); border-right-color: var(--point-white); top:calc(50% + 2px); right:20px; transform: translateY(-50%) rotate(-45deg); transition: all 0.4s; border-radius: 2px;}
        #footer .family_site dt.on span:before{top:calc(50% - 2px); transform: translateY(-50%) rotate(-45deg) scale(-1,-1);}
    #footer .family_site dd{position: absolute; bottom:calc(100% - 1px); left:0; width: 100%; border:1px solid var(--point-white); box-sizing: border-box; background: var(--gray-bg03); padding:10px 0; opacity: 0; pointer-events: none; transition: all 0.4s;}
        #footer .family_site dt.on + dd{opacity: 1; pointer-events: all;}
    #footer .family_site dd a{display: block; font-size: 75%; padding:8px 20px; font-weight: 400; color: var(--point-white);}
	#footer .ft_symbol{position: absolute;right:0;bottom:-100px;}
	#footer .ft_symbol img{height:140px;}

	@media screen and (max-width:1200px){
		#footer .ft_symbol img{height:100px;}
	}
    @media screen and (max-width:860px){
        #footer{padding:0 0 120px;}
        #footer .w_custom{padding-right: 0;}
        #footer .link_list{position: relative; top:auto; right:auto; display: flex;flex-wrap:wrap;justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.3); box-sizing: border-box; width: calc(100% + 30px); margin:0 0 40px -15px; gap:0 20px;; }
        #footer .link_list > li{text-align: center;}
            #footer .link_list > li + li{margin-top:0;}
        #footer .link_list > li > a{display: flex; align-items: center; justify-content: center; height: 60px;}
        #footer .ftr_title{margin-bottom: 60px;}
        #footer .ftr_title h3{font-size: 280%;}
        #footer .logo{width: 240px; margin-bottom: 40px;}
        #footer .addr_list > li{gap:0 25px;}
        #footer .copyright{margin-top:30px; gap:0 25px;}
        #footer .family_site{position: relative; right:auto; bottom:auto; margin-top:40px; width: 200px;}
        #footer .family_site dt span{padding:0 45px 0 15px;}
        #footer .family_site dt span:before{right:15px;}
        #footer .family_site dd a{padding:6px 15px;}
		#footer .ft_symbol{bottom:-55px;}
    }
    @media screen and (max-width:640px){
        #footer{padding:0 0 100px;}
		#footer .link_list{padding:15px 10px;gap:10px 20px;}
        #footer .link_list > li > a{height:auto;}
        #footer .ftr_title{margin-bottom: 50px;}
        #footer .ftr_title h3{font-size: 260%;}
        #footer .logo{width: 220px; margin-bottom: 30px;}
        #footer .addr_list > li{gap:0 20px;}
        #footer .copyright{margin-top:25px; gap:0 20px;}
        #footer .family_site{margin-top:35px; width: 180px;}
		#footer .ft_symbol{bottom:-25px;}
		#footer .ft_symbol img{height:65px;}
    }
    @media screen and (max-width:479px){
        #footer .link_list{gap:0 9vw;}
        #footer .link_list > li > a{font-size: 90%;}
        #footer .ftr_title{margin-bottom: 40px;}
        #footer .ftr_title h3{font-size: 240%;}
        #footer .logo{width: 200px; margin-bottom: 25px;}
        #footer .copyright{margin-top:20px;}
        #footer .family_site{margin-top:30px; width: 160px;}
		#footer .ft_symbol{bottom:-18px;}
		#footer .ft_symbol img{height:50px;}
    }
    @media screen and (max-width:431px){
        #footer .link_list{gap:0 7vw;}
        #footer .link_list > li > a{font-size: 80%;}
    }
    @media screen and (max-width:360px){
        #footer .link_list{gap:0 5vw;}
    }
    @media screen and (max-width:320px){
        #footer .ftr_title h3{font-size: 220%;}
        #footer .link_list{width: calc(100% + 20px); margin:0 0 35px -10px;}
    }