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

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

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

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%; box-sizing: border-box; overflow: clip; box-sizing: border-box; }
    #container, .w_custom{position: relative; width: calc(100% - 60px); max-width: 1380px; margin-inline: auto; box-sizing: border-box;}
    #container{background: var(--point-white);padding-bottom: 150px;}
    #container:has(.full_sec) { width: 100%; max-width: 100%; }

    @media (max-width:1023px){
        #container{padding-bottom: clamp(100px, 15vw, 150px);}
        .for_pc { display: none; }
    }
    @media (max-width:860px){
        #container, .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:320px){
        #container,.w_custom{width: calc(100% - 20px);}
    }


    .more_arw { position: relative; display: inline-block; box-sizing: border-box; min-width: 181px; padding-inline: 20px; padding-block: 18px;  border-radius: var(--radius-80); margin-inline: auto; font-size: var(--title-18); font-weight: 400; overflow: hidden; transition: all 0.4s; background: var(--trans-color); color: var(--black-color05); text-align: center; }
    .more_arw::before { content: ''; position: absolute; left: -5%; bottom: -5%; width: 110%; height: 110%; background: var(--point-color01); transition: all 0.6s; clip-path: circle(0 at 10% 100%); border: 1px solid var(--trans-color); }
    .more_arw::after { content: ''; position: absolute; left: 0; top: 0; width: calc(100% - 1px); height: calc(100% - 1px); border-radius: inherit; border: 1px solid var(--border-color02); box-sizing: border-box; transition: all 0.4s; }
    .more_arw span { position: relative; z-index: 3; display: inline-flex; justify-content: center; align-items: center; padding-right: 0; word-break: break-all; transition: all 0.4s; }
    .more_arw span::after { content: ''; position: absolute; width: 22px; height: 14px; background: url('../images/skin/ico_btn_arw.svg') no-repeat center; background-size: 22px 14px; opacity: 0; transition: all 0.4s; right: 0; flex-shrink: 0; }

    .more_btn { position: relative; display: inline-block; box-sizing: border-box; min-width: 181px; padding-inline: 20px; padding-block: 18px;  border-radius: var(--radius-80); margin-inline: auto; font-size: var(--title-18); font-weight: 400; overflow: hidden; transition: all 0.4s; background: var(--trans-color); color: var(--black-color05); text-align: center; }
    .more_btn::before { content: ''; position: absolute; left: -5%; bottom: -5%; width: 110%; height: 110%; background: var(--point-color03); transition: all 0.6s; clip-path: circle(0 at 10% 100%); border: 1px solid var(--trans-color); }
    .more_btn::after { content: ''; position: absolute; left: 0; top: 0; width: calc(100% - 1px); height: calc(100% - 1px); border-radius: inherit; border: 1px solid var(--border-color02); box-sizing: border-box; transition: all 0.4s; }
    .more_btn span { position: relative; z-index: 3; display: inline-flex; justify-content: center; align-items: center; padding-right: 0; word-break: break-all; transition: all 0.4s; }

    @media (hover: hover) and (pointer: fine) {
        .more_arw:hover::before { clip-path: circle(150% at 0 100%); }
        .more_arw:hover::after { border: 1px solid var(--point-color01); }
        .more_arw:hover span { padding-right: 35px; filter: var(--filter-white); }
        .more_arw:hover span::after { opacity: 1; }

        .more_btn:hover::before { clip-path: circle(150% at 0 100%); }
        .more_btn:hover::after { border: 1px solid var(--point-color03); }
        .more_btn:hover span { filter: var(--filter-white); font-weight: 600; }
    }

    @media (max-width: 1023px) {
        .more_arw { min-width: clamp(120px, 18vw, 180px); }
        .more_arw span { gap: 15px; }
        .more_arw span::after { position: relative; opacity: 1; width: clamp(18px, 2.2vw, 22px); height: clamp(12px, 1.4vw, 14px); background-size: clamp(18px, 2.2vw, 22px) clamp(12px, 1.4vw, 14px); }

        .more_btn { min-width: clamp(120px, 18vw, 180px); }
        .more_btn span { gap: 15px; }
        .more_btn span::after { position: relative; opacity: 1; width: clamp(18px, 2.2vw, 22px); height: clamp(12px, 1.4vw, 14px); background-size: clamp(18px, 2.2vw, 22px) clamp(12px, 1.4vw, 14px); }

        .more_arw:hover span { padding-right: 0; }

        .more_btn::before { clip-path: circle(150% at 0 100%); }
        .more_btn::after { border: 1px solid var(--point-color03); }
        .more_btn span { filter: var(--filter-white); font-weight: 600; }
    }

    @media (max-width: 860px) {
        .more_arw {  padding-block: clamp(12px, 1.8vw, 18px); }
        .more_btn {  padding-block: clamp(12px, 1.8vw, 18px); }
    }

    @media (max-width: 640px) {
        .more_arw span { gap: 10px; }
        .more_arw span::after { width: 20px; height: 10px; background-size: 20px 10px; }

    }


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

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

───────────────────────────────────────────────────────────*/
	/** PC 일반 **/
		#header { position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 50; }
        #header .cont { height: 100%; transition: all 0.4s; box-sizing: border-box; }
        #header .w_custom { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 30px; max-width: 1680px; }
        #header .logo { position: relative; height: 100%; z-index: 5; }
        #header .logo a { display: flex; max-width: 120px; height: 100%; padding-block: 20px; box-sizing: border-box; }
        #header .gnb { position: absolute; top: 0; left: 50%; translate: -50%; width: 100%; height: 100%; display: flex; justify-content: center; text-align: center; font-size: var(--title-20); }
        #header .gnb > li { position: relative; height: 100%; box-sizing: border-box; font-size: 90%; font-weight: 600; line-height: 1; color: var(--black-color03);  }
        #header .gnb > li > a { display: flex; align-items: center; justify-content: center; height: 100%; padding-inline: clamp(15px, 2.2vw, 40px); box-sizing: border-box; text-transform: uppercase; }
        #header .gnb .dep02 { position: absolute; top: 80%; left: 50%; translate: -50%; padding-block: 20px; background: var(--point-white); box-shadow: var(--shadow-01); border-radius: var(--radius-10); width: 160px; opacity: 0; pointer-events: none; transition: all 0.4s; }
        #header .gnb .dep02 > li { font-size: var(--title-18); line-height: 1.5; }
        #header .gnb .dep02 > li > a { display: block; padding: 8px 20px; font-weight: 400; color: var(--black-color06); transition: all 0.4s; }

        #header .link_wrap { display: flex; align-items: center; gap: 68px; }
        #header .lang_wrap { display: flex; align-items: center; gap: 28px; font-size: var(--title-20); }
        #header .lang_wrap li { font-size: 80%; line-height: 1.38; }
        #header .lang_wrap li a { display: block; font-weight: 500; color: var(--black-color03); font-size: inherit; font-family: var(--font-type02); box-sizing: border-box; padding-inline: 1px; border-bottom: 2px solid var(--trans-color); }
        #header .allCate{position: relative; bottom: 1px; width: 32px; height: 29px; display: flex; justify-content: space-between; flex-direction: column; box-sizing: border-box; }
        #header .allCate span{position: relative;width: 100%;height: 3px; transition:all 0.4s; border-radius: 20px; }
        #header .allCate span:not(:nth-child(1)) { background: var(--point-white); }
        #header .allCate span:nth-child(1){ position: relative; display: flex; align-items: center; gap: 3px; width: 100%; }
        #header .allCate span:nth-child(1) em { width: calc(100% - 6px); height: 100%; background: var(--point-white); transition: all 0.4s; }
        #header .allCate span:nth-child(1)::after { content: ''; position: absolute; right: 0; top: 0; width: 3px; height: 100%; border-radius: 20px; background: #e60012; transition: all 0.4s; }

        

        /* color */
        #header :where(.logo > a, .gnb > li > a, .lang_wrap > li > a) { filter: var(--filter-white); }

        /* on */
        #header.on .cont{ height: max(75px, 90%); background: rgba(0,0,0,0.4); backdrop-filter: blur(5px); }

        #header .lang_wrap li.on a { border-color: var(--point-white); font-weight: 600; }

        /* over */
        @media (hover: hover) and (pointer: fine){
            #header:hover .cont { background: rgba(0,0,0,0.4); backdrop-filter: blur(5px); }
            #header .gnb > li:hover .dep02 { pointer-events: all; opacity: 1; }
            #header .gnb .dep02 > li:hover > a { color: var(--point-color01); }

            #header .allCate:hover span:nth-child(1) em { width: 0; }
            #header .allCate:hover span:nth-child(1)::after { width: 100%; }
        }


        @media (max-width: 1100px){
            #header .gnb > li > a { padding-inline: 15px; }
        }

        @media (max-width: 1023px){
            #header { height: clamp(85px, 10vw, 100px); }
            #header .logo a { max-width: clamp(90px, 12vw, 120px);  }
            #header .gnb { display: none; }
            #header .lang_wrap { gap: clamp(15px, 2.5vw, 28px); }
            #header .link_wrap { gap: clamp(20px, 6vw, 68px); }

            #header .allCate { width: clamp(24px, 3.2vw, 32px); height: clamp(18px, 2.9vw, 29px); }
        }

        @media (max-width: 640px){
            #header .allCate span { height: 2px; }
        }

        @media (max-width: 479px){
            #header .lang_wrap li a { border-width: 1px; }
        }

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

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

───────────────────────────────────────────────────────────*/
	/* PC 일반 */
    #aside{position: fixed; top: 0; left:0; width: 100%; height: 100%; z-index: 999; background: rgba(0,0,0,0.8); backdrop-filter:blur(10px); display: flex; flex-direction: column; overflow: hidden; overflow-y: auto; padding-block: 10vh; box-sizing: border-box; opacity: 0; transition: all 0.6s; justify-content: center; clip-path: inset(0 0 100% 0);}
    #aside.on{opacity: 1; clip-path: inset(0);}
    body:has(#aside.on){overflow: clip; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;}
    #aside .gnb{width: 100%; font-size: var(--title-20); letter-spacing: 0; font-family: var(--font-type02); display: flex; flex-wrap:wrap; justify-content: center; gap:50px;}
    #aside .gnb > li{color: var(--point-white); font-size:var(--title-20); width:calc(20% - 40px); text-align: center; opacity:0; transform:translateY(100px); transition:all 0.8s;}
	#aside.on .gnb > li{opacity:1; transform:translateY(0);}
	#aside.on .gnb > li:nth-child(1){transition-delay:0.3s;}
	#aside.on .gnb > li:nth-child(2){transition-delay:0.4s;}
	#aside.on .gnb > li:nth-child(3){transition-delay:0.5s;}
	#aside.on .gnb > li:nth-child(4){transition-delay:0.6s;}
	#aside.on .gnb > li:nth-child(5){transition-delay:0.7s;}
    #aside .gnb > li > a{display: block; font-size:180%; color:inherit; font-weight: 500; line-height: 1.2; padding:30px 0; flex-shrink: 0; transition: all 0.4s; position: relative; text-transform: uppercase; }
	#aside .gnb > li > a:before{width:12px; height:0; opacity:0; content:''; box-sizing:border-box; border-radius:100%; background:var(--point-color01); position: absolute;left:50%; top:0; transform:translate(-50%); transition:all 0.3s;}
    #aside .gnb .dep02{margin-top:8px;}
    #aside .gnb .dep02 > li{font-size:var(--title-20);}
    #aside .gnb .dep02 > li > a{display: inline-block; font-size:110%; font-weight:400; padding:15px 0; transition: all 0.4s; color:var(--point-white);}
    #aside .utility{position: absolute; top:50px; right:50px; display: flex; align-items: center; gap: 30px;}
    #aside .close_btn{position: relative; width: 40px; height: 40px; z-index: 9;}
    #aside .close_btn span{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%) rotate(45deg); width: 100%; height: 2px; background: var(--point-white);}
    #aside .close_btn span + span{transform: translate(-50%, -50%) rotate(-45deg);}

    /* over */
    @media (hover: hover) and (pointer: fine){
        #aside .gnb > li:hover > a:before{height:12px;opacity:1;}
        #aside .gnb .dep02 > li:hover a{color:var(--point-white);}
        #aside .gnb .dep02:has(li:hover) li:not(:hover) > a{color:var(--black-color08);}
    }

    @media (max-width: 1600px){
        #aside .utility{top:30px; right: 30px;}
    }
	@media (max-width: 1300px){
		#aside .gnb{gap:20px;}
		#aside .gnb > li{width:calc(20% - 16px);}
	}

    @media (max-width: 1200px){
        #aside .gnb > li > a { font-size: 160%; }
    }

    @media (max-width: 1024px){
        #aside{padding-block: clamp(80px, 12vw, 120px); display: block; }
        #aside .close_btn{width: 35px; height: 35px;}
		#aside .gnb{flex-direction: column;gap:0;}
        #aside .gnb > li{display: block; padding: 20px 0; width:100%; text-align:left; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,0.5);}
        #aside .gnb > li > a{width: 100%; padding:0;}
		#aside .gnb > li > a:before{display: none;}
        #aside .gnb .dep02{display: flex; flex-wrap:wrap; margin-top: 10px; justify-content: flex-start; gap:0 12px;}
		#aside .gnb .dep02 li{width:calc(100% / 3 - 8px);}
		#aside .gnb .dep02 > li > a{padding:12px 0;}
		#aside .utility{top:15px; right: 15px; gap:20px; }
    }
    @media (max-width: 860px){
		#aside .close_btn{width: 30px; height: 30px;}
    }
    @media (max-width:640px){
        #aside .gnb > li > a{font-size: 200%;}
		#aside .gnb .dep02 li{width:calc(50% - 6px);}
        #aside .gnb .dep02 > li > a{padding:7px 0;font-size:100%;}
        #aside .gnb .dep02 > li:not(:last-child):after{margin:0 15px;}
    }
    @media (max-width:479px){
        #aside .gnb > li{padding: 15px 0;}
        #aside .gnb > li > a{font-size: 180%;}
        #aside .gnb .dep02{margin-top: 5px;}
        #aside .gnb .dep02 > li > a{font-size: 90%;}
    }


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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
	/* PC 일반 */
	#footer{position: relative; background: var(--point-color04); box-sizing: border-box; padding-block: 53px 58px; }
    #footer .w_custom { max-width: 1600px; }
    #footer .ft_top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; }
    #footer .ft_logo { filter: var(--filter-white); opacity: 0.4; max-width: 120px; flex-shrink: 0; }
    #footer .ft_gnb { display: flex; gap: 35px; font-size: var(--title-20); box-sizing: border-box; padding-bottom: 14px; }
    #footer .ft_gnb li { font-size: max(13px, 70%); color: var(--point-white); }
    #footer .ft_gnb li a { color: inherit; font-weight: 300; }
    #footer .ft_gnb li:not(:nth-child(2)) { color: var(--black-color10); }
    #footer .ft_bot { box-sizing: border-box; width: 100%; padding-top: 36px; margin-top: 18px; border-top: 1px solid rgba(217, 217, 217, 0.2); font-size: var(--title-20); }
    #footer .info_wrap { display: flex; gap: 12px 35px; flex-wrap: wrap; width: 100%; max-width: 784px; }
    #footer .info_wrap li { font-size: max(13px, 70%); color: rgba(255, 255, 255, 0.6); font-weight: 300; }
    #footer .info_wrap li a { letter-spacing: 0.005em; }
    #footer .copy { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 69px; color: var(--black-color10); font-size: max(13px, 70%); font-weight: 300; letter-spacing: 0; }
    #footer .copy span { text-transform: uppercase; letter-spacing: 0.005em; }
    
	.scr_top { position: absolute; bottom: 2px; right: 36px; display: block; width: 32px; z-index: 50; }

	@media (max-width: 1023px){
        #footer { padding-block: clamp(30px, 5vw, 53px) clamp(30px, 5vw, 58px); }
        #footer .ft_top { gap: 20px; }
        #footer .ft_logo { max-width: clamp(90px, 12vw, 120px); }
        #footer .ft_bot { margin-top: clamp(15px, 1.8vw, 18px); padding-top: clamp(20px, 3.6vw, 36px); }
        #footer .ft_gnb { padding-bottom: clamp(10px, 1.4vw, 14px); gap: clamp(15px, 3.5vw, 35px); }
        #footer .info_wrap { gap: 12px clamp(15px, 3.5vw, 35px); }
        #footer .copy { margin-top: clamp(30px, 6vw, 69px); gap: 10px 20px; }

        .scr_top { right: clamp(12px, 3vw, 36px); width: clamp(17px, 3vw, 32px); height: clamp(44px, 8vw, 82px); }
    }

    @media (max-width: 479px){
        #footer .ft_top { flex-direction: column; align-items: flex-start; }
        #footer .ft_gnb { padding-bottom: 0; }
    }

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

    MAIN | index.html

───────────────────────────────────────────────────────────*/
    .main_visual{position: relative; box-sizing: border-box; background: var(--black-color01);}
    .main_visual .slick-slide{position: relative; height: 920px; box-sizing: border-box;}
    .main_visual .thumb{display: block; width: 100%; height: 100%; background: no-repeat center / cover;}    
    .main_visual .txt_box{position: absolute;top: 32.6%;left:50%;translate: -50%;z-index: 2;font-size: var(--title-20);color: var(--point-white); text-wrap: balance; text-align: center;}
    .main_visual .txt_box h2 { font-size: clamp(40px, 8vw, 120px); font-weight: 700; letter-spacing: 0; }
    .main_visual .txt_box h3 { font-size: clamp(30px, 4vw, 60px); font-weight: 500; margin-top: 31px; letter-spacing: 0.001em; transition-delay: 0.3s; }
    .main_visual .txt_box p { font-size: clamp(16px, 3vw, 28px); font-weight: 400; margin-top: 24px; letter-spacing: 0.007em; transition-delay: 0.6s; }

    .main_visual .txtAni { position: relative; transform: translateY(70px); opacity: 0; transition: all 1.2s; transition-delay: 0.2s; }
    .main_visual .txtAni:nth-child(2) { transition-delay: 0.4s; }
    .main_visual .txtAni:nth-child(3) { transition-delay: 0.6s; }

    .main_visual .active .txtAni { transform: translateY(0); opacity: 1; }

    .main_visual .scroll_down{text-align: center; position: absolute; bottom:30px; left:50%; cursor: pointer; translate:-50%; z-index:10; font-size: var(--title-20); }
    .main_visual .scroll_down span{font-size:80%; color:var(--point-white); font-weight:400; letter-spacing: 0.01em; }
    .main_visual .scroll_down .ico_mouse{margin:0 auto;margin-top:7px;width:24px;height:40px;box-sizing:border-box;border-radius:18px;border:2px solid rgba(255, 255, 255, 0.5); position: relative;}
    .main_visual .scroll_down .ico_mouse::before{width:4px;height:4px;content:''; background:var(--point-color03); position: absolute; left:50%; top:6px; translate: -50%; box-sizing:border-box; border-radius:100%; animation:scroll 0.8s linear Infinite Alternate;}

    @keyframes scroll{
        0%{top:6px;}
        50%{top:24px;}
        10%{top:6px;}
    }


    .main_pha { box-sizing: border-box; position: relative; padding-block: 108px 160px; }
    .main_pha .w_custom { max-width: 1600px; }
    .main_pha .main_title { text-align: center; font-size: var(--title-20); }
    .main_pha .main_title h2 { font-size: 400%; font-weight: 700; color: var(--point-color03); }
    .main_pha .main_title h2 strong { font-size: inherit; color: var(--point-color01); font-weight: inherit; }
    .main_pha .main_title h2 strong em { font-size: inherit; color: var(--point-color02); font-weight: inherit; }
    .main_pha .main_title p { margin-top: 8px; font-size: 100%; color: var(--black-color06); font-weight: 400; line-height: 1.5; }
    .main_pha .pha_list { display: flex; margin-top: 60px; }
    .main_pha .pha_list > li { position: relative; border-radius: 30px; overflow: hidden; }
    .main_pha .pha_list > li .img_box { scale: 1; transition: all 0.4s; }
    .main_pha .pha_list > li .txt_box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; padding-block: 56px 46px; padding-inline: 40px; z-index: 3; font-size: var(--title-20); }
    .main_pha .pha_list > li .txt_box dt { font-size: 150%; color: var(--point-white); font-weight: 600; word-break: break-all; }
    .main_pha .pha_list > li .txt_box dd { position: absolute; left: 0; bottom: 81px; box-sizing: border-box; padding-inline: 40px; font-size: 80%; line-height: 1.5; color: var(--point-white); translate: 0 200px; transition: all 0.4s; opacity: 0; font-weight: 300; }
    .main_pha .pha_list > li .txt_box dd a { display: block; margin-top: 70px; width: 41px; height: 16px; background: url('../images/skin/img_main_bnr_arw.svg') no-repeat; background-size: 100% auto; }
    .main_pha .pha_list > li::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.4s; z-index: 3; }
    .main_pha .pha_list > li:nth-child(1)::before { background: rgba(88, 181, 48, 0.9); }
    .main_pha .pha_list > li:nth-child(2) { transition-delay: 0.2s; }
    .main_pha .pha_list > li:nth-child(2)::before { background: rgba(0, 17, 48, 0.9); }
    .main_pha .pha_list > li:nth-child(3)::before { background: rgba(235, 97, 29, 0.9); }
    .main_pha .pha_list > li:nth-child(3) { transition-delay: 0.4s; }
    .main_pha .pha_list > li > a { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 5; }
    .main_pha .phaSwiper .swiper-pagination { position: relative; inset: 0; margin-top: 30px; width: 100%; height: 3px; background: var(--border-color01); display: none; }
    .main_pha .phaSwiper .swiper-pagination span { background: var(--point-color02); }

    /* over */

    .main_pha .pha_list > li:hover::before { opacity: 1; }
    .main_pha .pha_list > li:hover .img_box { scale: 1.08; }
    .main_pha .pha_list > li:hover .txt_box dd { translate: 0; opacity: 1; }


    .main_bnr { height: 100vh; }
    .main_bnr .bnr_list { display: flex; width: 100%; height: 100%; background: url('../images/skin/img_main_sec3_01.jpg') no-repeat center / cover; transition: all 0.4s; }
    .main_bnr .bnr_list > li { position: relative; display: flex; justify-content: center; align-items: center; width: 50%; text-align: center; box-sizing: border-box; padding: 60px; }
    .main_bnr .bnr_list > li::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: all 0.4s; }
    .main_bnr .bnr_list .txt_box { font-size: var(--title-20); position: relative; z-index: 3; translate: 0 100px; transition: all 0.4s; width: 100%; top: 13px; }
    .main_bnr .bnr_list dt { font-size: 300%; color: var(--point-white); font-weight: 700; translate: 0 63px; transition: all 0.4s; }
    .main_bnr .bnr_list dd { color: var(--point-white); transition: all 0.4s; margin-top: 46px; opacity: 0; }
    .main_bnr .bnr_list dd strong { display: block; font-size: 200%; font-weight: 600; line-height: 1.25; }
    .main_bnr .bnr_list dd .sub_title { font-size: 120%; font-weight: 400; margin-top: 12px; }
    .main_bnr .bnr_list dd .desc { font-size: 90%; font-weight: 300; line-height: 1.35; margin-top: 35px; letter-spacing: 0; }
    .main_bnr .bnr_list dd .more_arw { margin-top: 58px; min-width: 220px; }
    .main_bnr .bnr_list dd .more_arw span { filter: var(--filter-white); }

    /* over */

    .main_bnr .bnr_list.bg0 { background: url('../images/skin/img_main_sec3_01.jpg') no-repeat center / cover;  }
    .main_bnr .bnr_list.bg1 { background: url('../images/skin/img_main_sec3_02.jpg') no-repeat center / cover;  }

    @media (hover: hover) and (pointer: fine){
        .main_bnr .bnr_list > li:hover::before { opacity: 1; }
        .main_bnr .bnr_list > li:hover .txt_box { translate: 0; }
        .main_bnr .bnr_list > li:hover dt { translate: 0; }
        .main_bnr .bnr_list > li:hover dd { opacity: 1; }
    }

    @media (max-width: 1280px){
        .main_pha .pha_list > li .txt_box { padding-block: 46px 36px; padding-inline: 30px; }
        .main_pha .pha_list > li .txt_box dd { padding-inline: 30px; }
    }

    @media (max-width: 1023px){
        .main_visual .slick-slide { height: clamp(550px, 92vw, 920px); }
        .main_visual .txt_box h3 { margin-top: clamp(15px, 3vw, 31px); }
        .main_visual .txt_box p { margin-top: clamp(15px, 2vw, 24px); }

        .main_pha { padding-block: clamp(60px, 10vw, 108px) clamp(80px, 16vw, 160px); }
        .main_pha .main_title p { margin-top: clamp(2px, 0.8vw, 8px); }
        .main_pha .main_title h2 { font-size: 320%; }

        .main_pha .pha_list { margin-top: clamp(30px, 6vw, 60px); }
        .main_pha .pha_list > li::before { opacity: 1; }
        .main_pha .pha_list > li .txt_box { padding-block: clamp(25px, 3vw, 46px) clamp(25px, 3vw, 36px); padding-inline: clamp(20px, 2.5vw, 30px); }
        .main_pha .pha_list > li .txt_box dt { font-size: 140%; }
        .main_pha .pha_list > li .txt_box dd { padding-inline: clamp(20px, 2.5vw, 30px); bottom: clamp(30px, 5vw, 81px); translate: 0; opacity: 1; font-size: 90%; }
        .main_pha .pha_list > li .txt_box dd a { margin-top: clamp(20px, 4vw, 70px); width: clamp(32px, 4.1vw, 41px); height: clamp(12px, 1.6vw, 16px); }
        .main_pha .phaSwiper .swiper-pagination { display: block; }

        .main_bnr { height: auto; }
        .main_bnr .bnr_list { background: none; flex-direction: column; }
        .main_bnr .bnr_list > li { width: 100%; padding: clamp(40px, 6vw, 60px) clamp(30px, 5vw, 50px); }
        .main_bnr .bnr_list > li:nth-child(1) { background: url('../images/skin/img_main_sec3_01.jpg') no-repeat center / cover; }
        .main_bnr .bnr_list > li:nth-child(2) { background: url('../images/skin/img_main_sec3_02.jpg') no-repeat center / cover; }
        .main_bnr .bnr_list > li::before { opacity: 1; }
        .main_bnr .bnr_list .txt_box { translate: 0; top: 0; }
        .main_bnr .bnr_list dt { translate: 0; font-size: 280%; }
        .main_bnr .bnr_list dd { opacity: 1; margin-top: clamp(20px, 4vw, 46px); }
        .main_bnr .bnr_list dd strong { font-size: 180%; }
        .main_bnr .bnr_list dd .sub_title { margin-top: clamp(10px, 1.2vw, 12px); }
        .main_bnr .bnr_list dd .desc { margin-top: clamp(20px, 3vw, 35px); }
        .main_bnr .bnr_list dd .more_arw { margin-top: clamp(25px, 5vw, 58px); min-width: clamp(140px, 22vw, 220px); }
    }

    @media (max-width: 860px){
        .main_visual .scroll_down .ico_mouse { width: 22px; height: 36px; }

        .main_pha .main_title h2 { font-size: 280%; }
        .main_pha .pha_list > li { width: calc(100% / 2 - 10px); }

        .main_bnr .bnr_list dt { font-size: 260%; }
        .main_bnr .bnr_list dd strong { font-size: 160%; }

        @keyframes scroll{
            0%{top:4px;}
            50%{top:22px;}
            10%{top:4px;}
        }
    }

    @media (max-width: 640px){
        .main_pha .main_title h2 { font-size: 240%; }
        .main_bnr .bnr_list dt { font-size: 240%; }
        .main_bnr .bnr_list dd strong { font-size: 140%; }
        .main_bnr .bnr_list dd .sub_title { font-size: 110%; }
        
    }

    @media (max-width: 530px){
        #footer .copy { flex-direction: column; }
    }

    @media (max-width: 479px){
        .main_visual .scroll_down .ico_mouse { width: 20px; height: 33px; }

        .main_pha .main_title h2 { font-size: 200%; }
        .main_pha .pha_list > li { border-radius: 15px;  }
        .main_pha .pha_list > li .img_box > img { min-height: 300px;}
        .main_bnr .bnr_list dt { font-size: 220%; }
        .main_bnr .bnr_list dd strong { font-size: 120%; }

        
        .main_bnr .bnr_list > li { min-height: 400px; }

        @keyframes scroll{
            0%{top:4px;}
            50%{top:20px;}
            10%{top:4px;}
        }
    }

    @media (max-width: 420px){
        .main_pha .pha_list > li { width: 100%; }
    }