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

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

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

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
    #wrap {position:relative;width:100%;box-sizing: border-box; overflow: clip;}
    #container, .w_custom{position: relative; width: calc(100% - 60px); max-width: 1240px; margin-inline: auto; box-sizing: border-box;}
    #container{padding-block:61px 120px;}
    #container:has(.full_sec){width: 100%; max-width: 100%;}
	  #container.w_100{width:100% !important;max-width:100% !important;padding:0 !important;}
    #wrap [class^='swiper-button']:after{display: none;}

    @media (max-width:1023px){
        #container{padding-bottom: clamp(100px, 12vw, 120px);}
    }
    @media (max-width:860px){
        #container, .w_custom{width: calc(100% - 30px);}
    }
	@media (max-width:479px){
		#container{padding-top:40px;}
	}
    @media (max-width:320px){
        #container, .w_custom{width: calc(100% - 20px);}
    }

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

	MAIN | index.html

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

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

───────────────────────────────────────────────────────────*/
    #header{position: sticky; top:0; width: 100%; background: var(--point-white); box-sizing: border-box; z-index: 50;}
    #header .w_custom{ max-width: 1740px;}
	#header .cont{position: relative;height: 80px;box-sizing: border-box;z-index: 5;background: var(--point-white);box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);}
    #header .cont .w_custom{height: 100%; display: flex; align-items: center; justify-content: space-between;}
    #header .logo{height: 100%; max-width: 50%;}
    #header .logo a{display: flex; align-items: center; height: 100%; padding-block: 15px; box-sizing: border-box;}
    #header .gnb{position: absolute; top:0; left:50%; transform: translateX(-50%); display: flex; justify-content: center; text-align: center; font-size: var(--title-20); height: 100%;}
    #header .gnb > li{position: relative; font-size: inherit; font-weight: 700; color: var(--black-color03); height: 100%;}
        #header .gnb > li:before, #header .gnb > li:last-child:after{position: absolute;content:'';width: 1px;height: 24px;background: var(--border-color01);top:50%;left:0;transform: translateY(-50%);}
        #header .gnb > li:last-child:after{left:auto; right:0;}
    #header .gnb > li > a{position: relative;display: flex;align-items: center;justify-content: center;height: 100%;padding-inline: 10px;width: clamp(100px, 8vw, 150px);box-sizing: border-box;}
        #header .gnb > li.on > a span{background: var(--point-grad01); background-clip: text; color:var(--trans-color); }
        #header .gnb > li > a:before{position: absolute; content:''; left:0; bottom:0; width: 100%; height: 5px; background: var(--point-grad01); opacity: 0; clip-path: inset(0 100% 0 0); transition: all 0.4s;}
        #header .gnb > li.on > a:before{opacity: 1; clip-path: inset(0 0 0 0);}
    #header .link_wrap{display: flex; align-items: center; gap: 20px;}
    #header .allCate{display: none;gap:15px;}
	#header .allCate p{font-size:var(--title-14);color:var(--black-color03);font-weight:500;}
	#header .allCate .cate_box{ flex-direction: column; justify-content: space-between; width: 30px; height: 20px;display: flex;}
    #header .allCate span{width: 100%; height: 2px; background: var(--black-color03);}
    #wrap .lang_desc{position: relative;font-size: var(--title-20);font-family: var(--font-type02);display: inline-block;}
	#wrap .lang_desc dt{position:relative;z-index:3;background: var(--border-color02);padding: 1px;clip-path: var(--polygon-path01);height: 32px;}
    #wrap .lang_desc dt.on{background: var(--point-grad01);}
    #wrap .lang_desc dt span{position: relative;font-size: max(14px, 85%);font-weight: 400;color: var(--black-color03);height: 100%;clip-path: inherit;cursor: pointer;transition: all 0.4s;box-sizing: border-box;background: var(--point-white);font-family:var(--font-type02);}
    #wrap .lang_desc dd{position: absolute;top: calc(100% - 1px);left:0;width: 100%;font-size: max(13px, 75%);font-weight: 500;color: var(--black-color06);padding-block: 7px;background: var(--point-white);border: 1px solid var(--border-color02);box-sizing: border-box;display: flex;flex-direction: column;gap: 8px;opacity: 0;clip-path: inset(0 0 100% 0);transition: all 0.4s;}
        #wrap .lang_desc:has(dt.on) dd{opacity: 1;clip-path: inset(-10px);}
        #wrap .lang_desc dd .on{color: var(--point-color01);}
    #wrap .lang_desc :where(.en, .kr){display: flex;gap: 8px;align-items: center;justify-content: center;padding-inline: 7px;box-sizing: border-box;}
    #wrap .lang_desc :where(.en, .kr):before{display: inline-flex; content:''; width: 25px; height: 16px; background: no-repeat center / 100% auto; }
    #wrap .lang_desc .en:before{background-image: url('../images/skin/lang_en.svg');}
    #wrap .lang_desc .kr:before{background-image: url('../images/skin/lang_kr.svg');}

    #header .all_wrap{position: absolute;top: 100%;left:0;width: 100%;padding-block: 25px;box-sizing: border-box;background: var(--point-white);box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);clip-path: inset(0 0 100% 0); opacity: 0; transition: all 0.6s;}
    #header .all_gnb{display: flex;justify-content: center;border-inline: 1px solid var(--border-color01);width: fit-content;margin-inline: auto;box-sizing: border-box; font-family: var(--font-type02);}
    #header .all_gnb > li{width: clamp(100px, 8vw, 150px);box-sizing: border-box;}
	#header .all_gnb > li:not(:first-child){border-left:1px solid var(--border-color01);}
    #header .all_gnb > li > a{display: none;}
    #header .all_gnb .dep02 > li{position: relative; font-size: max(14px, 75%); font-weight: 400; font-family: var(--font-type02); text-align: left; }
	#header .all_gnb .dep02 > li + li{margin-top:15px;}
    #header .all_gnb .dep02 > li > a{display: block; padding-inline:10px; color: var(--black-color03); box-sizing: border-box; transition: all 0.4s;}

    /* over */
        @media (hover:hover) and (pointer: fine){
            /* #header .gnb > li:hover > a:before{opacity: 1; clip-path: inset(0 0 0 0);} */
            #header .gnb > li:hover span{background: var(--point-grad01); background-clip: text;color:var(--trans-color);}
            #header:has(:where(.gnb, .all_wrap):hover) .all_wrap{clip-path: inset(0 0 -20px 0); opacity: 1;}
            #header .all_gnb .dep02 > li:hover > a{color: var(--point-color01); }
        }
	@media (max-width:1650px){
		#header .gnb > li > a, #header .all_gnb > li{width:10vw;}
		#header .all_gnb .dep02 > li{font-size:13px;}
	}
    @media (max-width:1400px){
        #header .gnb > li{font-size: 90%;}
    }
    @media (max-width:1300px){
		#header .gnb > li > a, #header .all_gnb > li{width:9.5vw;}
        #header .gnb > li{font-size: 80%;}
		#header .all_gnb .dep02 > li{font-size:12px;}
		#header .all_gnb .dep02 > li > a{padding-inline:6px;}
    }
    @media (max-width:1200px){
        #header .gnb{display: none;}
        #header .allCate{display: inline-flex;align-items: center;}
    }
    @media (max-width:1023px){
        #header .cont{height: clamp(65px, 10vw, 80px);}
    }
    @media (max-width:479px){
        #header .link_wrap{gap: 15px;}
        #header .allCate .cate_box{width: 26px;}
    }

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

	Aside | outline/nav.html

───────────────────────────────────────────────────────────*/
    #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: 10vh 0;box-sizing: border-box;opacity: 0;clip-path: inset(0 0 0 100%);transition: all 0.6s;}
        #aside.on{opacity: 1;clip-path: inset(0 0 0 0);}
    body:has(#aside.on){overflow: hidden; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;}
    #aside .gnb{width: 100%;font-size: var(--title-20);letter-spacing: 0;}
    #aside .gnb > li{display: flex; align-items: center; justify-content: space-between; gap: 30px; color: var(--point-white); border-bottom: 1px solid rgba(255,255,255,0.2)}
    #aside .gnb > li > a{display: block;font-size: 240%;font-weight: 600;line-height: 1.2;padding:30px 0;flex-shrink: 0;transition: all 0.4s;color: var(--point-color03);filter: var(--filter-white);}
    #aside .gnb .dep02{display: flex; flex-wrap: wrap;}
    #aside .gnb .dep02 > li > a{display: inline-block;font-size: 100%;font-weight: 300;padding:10px 0;transition: all 0.4s;opacity: 0.6;font-family: var(--font-type02);}
    #aside .gnb .dep02 > li:not(:last-child):after{display: inline-flex; content:'/'; margin:0 20px; opacity: 0.6;} 
    #aside .link_wrap{position: absolute;top: 50px;right: 50px; display: flex; align-items: center; gap: 20px;}
    #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);}
    #aside .link_list{display: flex;flex-wrap: wrap;justify-content: center;gap: 20px;font-size: var(--title-20);margin-top: 50px;}
    #aside .link_list > li > a{position: relative; display: flex; align-items: center; justify-content: center; height: 50px; padding:0 24px; text-align: center; box-sizing: border-box; border-radius: 60px; box-shadow: inset 0 0 0 1px var(--black-color11); font-size: 90%; font-weight: 600; color: var(--black-color11); letter-spacing: 0.01em; transition: all 0.4s; overflow: hidden;}
    #aside .link_list > li > a:before{position: absolute; content:''; top:0; left:0; background: var(--black-color11); width: 100%; height: 100%; clip-path: circle(0 at 0 100%); transition: all 0.6s;}
    #aside .link_list > li:last-child > a:before{background: var(--point-color01);}
    #aside .link_list > li > a span{position: relative; z-index: 3; filter: var(--filter-white); transition: all 0.4s;}
    

        /* over */
        @media (hover:hover) and (pointer: fine){
            #aside .gnb > li:hover > a{filter: none;}
            #aside .gnb .dep02 > li > a:hover{opacity: 1;}
            #aside .link_list > li > a:hover:before{clip-path: circle(150% at 0 100%);}
        }

    @media screen and (max-width:1600px){
        #aside .link_wrap{top:30px; right: 30px;}
    }
    @media screen and (max-width:1023px){
        #aside .close_btn{width: 35px; height: 35px;}
        #aside .link_list{margin-top: clamp(30px, 5vw, 50px);}
    }
    @media screen and (max-width:860px){
        #aside{padding:70px 0;}
        #aside .gnb > li{display: block; padding: 20px 0;}
        #aside .gnb > li > a{width: 100%; padding:0;}
        #aside .gnb .dep02{margin-top: 10px;}
        #aside .link_wrap{top:15px; right: 15px; }
        #aside .close_btn{ width: 30px; height: 30px;}
        #aside .link_list > li > a{height: 45px;}

    }
    @media screen and (max-width:640px){
        #aside .gnb > li > a{font-size: 220%;}
        #aside .gnb .dep02 > li > a{padding:7px 0;}
        #aside .link_list{gap: 10px;}
        #aside .link_list > li > a{height: 40px; padding: 0 20px;}
        #aside .gnb .dep02 > li:not(:last-child):after{margin:0 15px;}

    }
    @media screen and (max-width:479px){
        #aside{padding:50px 0;}
        #aside .gnb > li{padding: 15px 0;}
        #aside .gnb > li > a{font-size: 200%;}
        #aside .gnb .dep02{margin-top: 5px;}
        #aside .gnb .dep02 > li > a{font-size: 90%;}

        #aside .link_wrap{gap: 15px;}
    }

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

	FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative; background: var(--point-color02); box-sizing: border-box; padding-block: 50px;}
    #footer .w_custom{max-width: 1740px;display: flex;flex-direction: column;gap: 48px;}
    #footer .gnb{display: flex; font-size: var(--title-20);gap: 40px 0;}
    #footer .gnb > li{width: 100%;padding-inline: clamp(20px, 2.3vw, 45px);font-size: 125%;font-weight: 600;color: var(--point-white);box-sizing: border-box;}
        #footer .gnb > li:first-child{padding-left: 0;}
        #footer .gnb > li:last-child{padding-right: 0;}
    #footer .gnb > li:not(:first-child){border-left: 1px solid rgba(255,255,255,0.1);}
    #footer .gnb > li > a{display: block;transition: all 0.4s;}
    #footer .gnb .dep02{padding-top: 10px;}
    #footer .gnb .dep02 > li{font-family: var(--font-type02);font-size: max(13px, 60%);font-weight: 200;filter: var(--filter-white);}
    #footer .gnb .dep02 > li > a{display: block;padding-block: 6px;transition: all 0.4s;}
    #footer .gnb .etc{display: flex;flex-wrap: wrap;align-items: flex-start;justify-content: flex-end;gap:20px 10px;align-content: flex-start;}
    #footer .gnb .sns{display: inline-flex;align-items: center;flex-wrap: wrap;gap: 2px;font-size: 0;}
    #footer .gnb .sns a{display: inline-flex; align-items: center; height: 24px;}
    #footer .gnb .scr_top{display: inline-block;font-size: var(--title-20);font-family: var(--font-type01);background: var(--point-white);padding: 1px;clip-path: var(--polygon-path01);height: 24px;box-sizing: border-box;}
    #footer .gnb .scr_top span{position: relative;display: flex;align-items: center;justify-content: center;gap: 7px;font-size: max(12px, 65%);font-weight: 400;color: var(--point-white);background: var(--point-color02);height: 100%;padding-inline: 10px;clip-path: inherit;cursor: pointer;transition: all 0.4s;box-sizing: border-box;}
        #footer .gnb .scr_top span:after{display: inline-flex;content:'';width: 6px;aspect-ratio: auto 1;border:solid var(--point-white);border-width: 1px 1px 0 0;box-sizing: border-box;transform: translateY(2px) rotate(-45deg);}
    #footer .gnb .iso{display: inline-flex;align-items: center;flex-wrap: wrap;gap: 10px;font-size: 0;justify-content: flex-end;}
    #footer .gnb .iso span{display: inline-flex; height: 60px; justify-content: center;}

    #footer .addr_list{display: flex;flex-direction: column;justify-content: center;gap: 6px 0;}
    #footer .addr_list > li{display: flex;justify-content: center;flex-wrap: wrap;}
    #footer .addr_list .desc{display: flex;font-size: var(--title-20);font-family: var(--font-type02);align-items: baseline;}
    #footer .addr_list .desc:not(:last-child):after{display: inline-flex;content:'';width: 1px;height: 12px;background: rgba(217, 217, 217, 0.3);margin-inline: 10px;}
    #footer .addr_list .desc :where(dt, dd){font-size: max(13px, 75%);font-weight: 300;line-height: 1.6; filter: var(--filter-white);opacity: 0.8;}
    #footer .addr_list .desc dt{padding-right: 4px; flex-shrink: 0;}
	#footer .addr_list .desc .copy{opacity:0.8;}

    #wrap .quick_wrap{position: sticky;bottom: 0;right:50px;z-index:49;text-align: center;display: flex;flex-direction: column;gap: 15px;width: fit-content;margin-left: auto;height: 100vh;margin-top: -100vh;justify-content: flex-end;padding-bottom: 30px;box-sizing: border-box; pointer-events: none;}
    #wrap .quick_wrap .gnb{width: 80px;background: var(--point-white);box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);border-radius:var(--radius-05);font-size: var(--title-20);font-family: var(--font-type02);padding-inline: 10px;box-sizing: border-box; pointer-events: all;}
	#wrap .quick_wrap .gnb .dep02 > li + li{border-top: 1px solid var(--border-color01);}
    #wrap .quick_wrap .gnb .dep02 > li > a{display: flex;align-items: center;justify-content: center;height: 50px;font-size: max(12px, 65%);font-weight: 400;line-height: 1.15; color: var(--black-color00); transition: all 0.4s;font-family:var(--font-type02);}
    #wrap .quick_wrap .gnb .dep02 > li.on > a{color: var(--point-color03); font-weight: 600;}
	#wrap .quick_wrap .gnb .dep02 > li > a.quick_top{height:auto;background:var(--black-color00);width:calc(100% + 20px);margin-left:-10px;height:20px;border-radius:5px 5px 0 0;position: relative;display: flex;align-items: center;justify-content: center;}
	#wrap .quick_wrap .gnb .dep02 > li > a.quick_top:before{width:10px;height:10px;content:"";border:2px solid var(--point-white);border-width:2px 2px 0 0;transform:rotate(-45deg);display: inline-block;margin-top:6px;}

    #wrap .quick_wrap .icon_btn{display: flex;align-items: center;justify-content: center;width: 60px;aspect-ratio: auto 1;margin-inline: auto;border-radius: 100%;background: var(--point-grad02); box-shadow: 0 0 25px rgba(0, 0, 0, 0.15); pointer-events: all;}
	#wrap .quick_wrap .icon_btn img{width:calc(100% - 26px);}
	#wrap .quick_wrap .icon_btn span{opacity:0;font-size:var(--title-16);color:var(--point-white);font-weight:600;display: none;}
	#wrap .quick_wrap .scr_top{background:rgba(0,0,0,0.7);display: none;}
	#wrap .quick_wrap .scr_top:before{width:15px;height:15px;content:"";border:2px solid var(--point-white);border-width:3px 3px 0 0;transform:rotate(-45deg);display: inline-block;margin-top:6px;}
	
	#wrap #footer .btn_policy{text-align: center;margin-top:20px;font-size:var(--title-20);box-sizing:border-box;padding:0 15px;}
	#wrap #footer .btn_policy a{margin:0 auto;background:none;font-size: max(13px, 75%);font-weight:400;line-height: 1.6; filter: var(--filter-white);opacity: 0.8;}
	#wrap #footer .btn_policy a span{font-size:inherit;color:inherit;font-weight:inherit;}
	
	#wrap .policy_layer{position: fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);display:none;align-items: center;justify-content: center;z-index:70;}
	#wrap .policy_layer.on{display: flex;}
	body:has(.policy_layer.on){overflow:hidden;}
	#wrap .policy_layer .layer_cont{background:var(--point-white);width:800px;position: relative;}
	#wrap .policy_layer .layer_cont .btn_close{width:30px;height:30px;position: absolute;top:-40px;right:-40px;}
	#wrap .policy_layer .layer_cont .btn_close a{display: block;width:100%;height:100%;position: relative;}
	#wrap .policy_layer .layer_cont .btn_close span{display: inline-block;width:100%;height:2px;background:var(--point-white);position: absolute;top:50%;left:0;}
	#wrap .policy_layer .layer_cont .btn_close span:nth-child(1){transform:rotate(45deg);}
	#wrap .policy_layer .layer_cont .btn_close span:nth-child(2){transform:rotate(-45deg);}
	#wrap .policy_layer .pop_box{width:100%;height:60vh;box-sizing:border-box;padding:10px 10px;position: relative;}
	#wrap .policy_layer .layer_cont iframe{width:100%;height:100%;}
	
     /* over */
        @media (hover:hover) and (pointer: fine){
            #footer .gnb > li:hover > a{color: var(--point-color03);}
            #footer .gnb .dep02 > li:hover > a{color: var(--point-white);}
			
			#wrap .quick_wrap .icon_btn:hover img{display: none;}
			#wrap .quick_wrap .icon_btn:hover span{opacity:1;display: block;}
			#wrap .quick_wrap .scr_top:hover:before{display: none;}
        }

    /* over */
        @media (hover:hover) and (pointer:fine){
            #footer .gnb .scr_top:hover span{background: var(--point-white); border-color: var(--point-white); color: var(--point-color02);}
            #footer .gnb .scr_top:hover span:before{background: var(--point-white);}
            #footer .gnb .scr_top:hover span:after{border-color: var(--point-color02);}

            #wrap .quick_wrap .gnb .dep02 > li > a:hover{color: var(--point-color03);}
        }
    @media (max-width:1800px){
        #wrap .quick_wrap{right:30px;}
    }
    @media (max-width:1200px){
        #footer .gnb{flex-wrap: wrap;}
        #footer .gnb > li{width: calc(100% / 3); border-left: 1px solid rgba(255,255,255,0.1); padding-inline: clamp(20px, 2.3vw, 45px) !important;}
        #footer .gnb .etc{justify-content: flex-start;}
    }
    @media (max-width:1023px){
        #footer .w_custom{gap: clamp(25px, 5vw, 50px);}
        #footer .gnb .dep02{padding-top: 7px;}
        #footer .gnb .dep02 > li > a{padding-block: 5px;}
        #footer .gnb .sns a{height: clamp(20px, 3vw, 24px);}
        #footer .gnb .iso span{height: clamp(40px, 6vw, 60px);}

        #wrap .quick_wrap .gnb{display: none;}
        #wrap .quick_wrap .icon_btn{width: clamp(42px, 7vw, 60px);}
        #wrap .quick_wrap .icon_btn img{width:calc(100% - clamp(20px, 2.6vw, 26px));}
		#wrap .quick_wrap .scr_top{display:flex;}
		
		#wrap .policy_layer .layer_cont{width:calc(100% - 60px);}
		#wrap .policy_layer .layer_cont .btn_close{right:0;}
    }
    @media (max-width:860px){
        #footer .addr_list .desc:not(:last-child):after{height: 10px;}

        #wrap .quick_wrap{right:15px;}
        #wrap .quick_wrap .gnb{width: 70px;}
    }
    @media (max-width:640px){
        #footer{padding-block: 40px;}
		#footer .gnb{gap:20px 0;}
        #footer .gnb > li{width:50%; border:0 !important; padding:0 !important}
        #footer .gnb .iso{width: 100%;justify-content: flex-start;}
        #footer .gnb .etc{justify-content: space-between;gap: 15px;}
        #footer .addr_list > li{justify-content:flex-start;gap: 0 20px;}
        #footer .addr_list .desc:not(:last-child):after{height: 8px;display: none;}

        #wrap .quick_wrap{padding-bottom: 20px; }
        #wrap .quick_wrap :is(.gnb, .icon_btn){box-shadow: 0 0 12.5px rgba(0, 0, 0, 0.15);}
        #wrap .quick_wrap .gnb{width: 65px;}
		#wrap .quick_wrap .scr_top:before{width:10px;height:10px;border-width:2px 2px 0 0;margin-top:5px;}
		
		#wrap .policy_layer .layer_cont{width:calc(100% - 30px);}
		#wrap .policy_layer .layer_cont .btn_close{width:26px;height:26px;top:-35px;}
		
		#wrap #footer .btn_policy{text-align:left;}
    }
	
/*───────────────────────────────────────────────────────────

	MAIN

───────────────────────────────────────────────────────────*/
	/*visual*/
	.main_visual_wrapper{width:100%;height:830px;position: relative;background:var(--black-color00);box-sizing:border-box;display: flex;justify-content: flex-end;}
	.main_visual_wrapper:before{width:100%;height:1px;content:"";background:linear-gradient(90deg, #000 6.17%, #2D55A5 31.12%, #38B4E9 68.11%, #000 95.29%);position: absolute;bottom:0;left:0;z-index:5;}
	.main_visual_wrapper .visual_content{position: absolute;top:0;left:160px;box-sizing:border-box;padding-top:72px;}
	.main_visual_wrapper .visual_content .txt_box{font-size:var(--title-20);color:var(--point-white);font-weight:700;line-height:1.1;position: relative;z-index:4;}
	.main_visual_wrapper .visual_content .txt_box h3{position: relative;width: fit-content;background: var(--point-grad01);background-clip: text;color: var(--trans-color);font-size: 200%;font-weight: 700;line-height: 1.1;}
	.main_visual_wrapper .visual_content .txt_box > p{font-size:200%;color:inherit;font-weight:inherit;margin-top:2px;margin-bottom:2px;}
	.main_visual_wrapper .visual_content .txt_box > span{font-size:var(--title-14);color:inherit;font-weight:300;line-height:1.6;font-family:var(--font-type02);letter-spacing:0.01em;}
	
	.main_visual_wrapper .visual_dots{position: relative;z-index:2;}
	.main_visual_wrapper .dots{display: flex;margin-top:5px;}
	.main_visual_wrapper .dots li{width:60px;height:60px;box-sizing:border-box;position: relative;border:1px solid var(--point-white);display: flex;align-items: center;justify-content: center;text-align: center;cursor:pointer;}
	.main_visual_wrapper .dots li + li{border-left:none;}
	.main_visual_wrapper .dots li a{display: block;width:100%;height:100%;position: absolute;top:0;left:0;}
	.main_visual_wrapper .dots li .img{display: flex;width:100%;height:100%;align-items: center;justify-content: center;}
	.main_visual_wrapper .dots li .img img{}
	.main_visual_wrapper .dots li p{display: none;font-size:var(--title-16);color:var(--black-color00);font-weight:400;font-family:var(--font-type02);line-height:1;}
	.main_visual_wrapper .dots li.on{background:var(--point-color03);}
	.main_visual_wrapper .dots li.on .img{display: none;}
	.main_visual_wrapper .dots li.on p{display: block;color:var(--point-white);}
	
	.main_visual_wrapper .visual_content .visual_dots{margin-top:30px;position: relative;z-index:3;}
	.main_visual_wrapper .visual_content .visual_dots span{font-size:var(--title-14);color:var(--point-white);font-weight:500;font-family:var(--font-type02);letter-spacing:0.01em;display: inline-flex;align-items: center;gap:6px;}
	.main_visual_wrapper .visual_content .visual_dots span:after{width:15px;height:12px;content:"";background:url('../images/skin/main_more.svg')no-repeat center;display: inline-block;background-size:auto 100%;}
	.main_visual_wrapper .visual_content .prd{display: flex;align-items:flex-end;gap:0 46px;margin-top:-73px;}
	
	.main_visual_wrapper .main_visual{width:58%;position: relative;}
	.main_visual_wrapper .main_visual:before{position: absolute;content: '';width:19px;height:38.6%;background: var(--point-grad02);left:100px;top:0;z-index: 3;transform:skew(-25deg);}
	.main_visual_wrapper .main_visual:after{position: absolute;content:'';width:52px;height:30.1%;background: var(--point-grad02);right:145px;bottom:0;z-index: 3;transform:skew(-25deg);}
	.main_visual_wrapper .main_visual ul{display: flex;height:100%;margin-right:61px;text-align: right;}
	.main_visual_wrapper .main_visual ul li{width:calc(100% / 3);/* clip-path:polygon(61% 0%, 149% 0%, 60% 100%, -48% 100%); */transform: skewX(-25deg);position: relative;transition: flex 0.3s ease-in-out;overflow:hidden;font-size:var(--title-20);color:var(--point-white);font-weight:400;}
	/* .main_visual_wrapper .main_visual ul li a{display: block;width:100%;height:100%;position: absolute;top:0;left:0;z-index:5;} */
	.main_visual_wrapper .main_visual ul li .thumb{width:100%;position: relative;height:100%;}
	.main_visual_wrapper .main_visual ul li .thumb img{height:100%;max-width:initial;position: absolute;top:50%;left:50%;transform:translate(-50%, -50%) skew(25deg);}
	.main_visual_wrapper .main_visual ul li p{font-size:150%;color:inherit;font-weight:inherit;display: inline-flex;align-items: center;gap:10px;font-family:var(--font-type02);position: absolute;bottom:0;left:30px;z-index:-1;transform:skew(25deg) translateY(100px);transition:all 0.5s;}
	.main_visual_wrapper .main_visual ul li p:after{width:16px;height:12px;content:"";background:url('../images/skin/main_more.svg')no-repeat center;background-size:auto 100%;display: inline-block;}
	
	.main_visual_wrapper .main_visual ul li.on{flex:3;z-index:3;}
	.main_visual_wrapper .main_visual ul li:not(.on){flex:0.65;opacity:0.3;}
	.main_visual_wrapper .main_visual ul li:not(.on) a{pointer-events:none;}
	.main_visual_wrapper .main_visual ul li.on p{bottom:28px;z-index:3;opacity:1;transform:skew(25deg) translate(0);}
	
	.main_visual_wrapper .main_visual ul li.normal{opacity:1;}
	.main_visual_wrapper .main_visual ul li.normal a{pointer-events:initial;}
	
	.main_visual_wrapper .m_dots{display: none;}
	
	/*lm*/
	.main_content{background:var(--black-color00);}
	.main_content > div{box-sizing:border-box;text-align: center;}
	.main_content .main_title{font-size:var(--title-20);color:var(--point-white);font-weight:300;line-height:1.6;text-align: center;position: relative;z-index: 3;}
	.main_content .main_title h4{width: fit-content;background: var(--point-grad01);background-clip: text;color: var(--trans-color);font-size: 200%;font-weight: 700;line-height: 1.25;position: relative;padding-bottom: 11px;margin:0 auto;margin-bottom:15px;}
	.main_content .main_title h4:before{width: 100%;height: 5px;content: "";background: var(--point-grad01);position: absolute;bottom: 0;left: 0;}
	.main_content .main_title p{font-size:var(--title-14);color:inherit;font-weight:inherit;line-height:1.7;font-family:var(--font-type02);letter-spacing:0.01em;}
	#wrap .main_content .btn_box{display: inline-flex;justify-content: center;}
	#wrap .main_content .see_more{background: none;}
	
	.main_lm{padding:140px 0 64px;}
	.main_lm .lm_obj{text-align: center;margin-top:-81px;}
	.main_lm .txt{position: absolute;top:47.5%;left:50%;transform:translate(-50%, -50%);width:calc(100% - 94px);}
	.main_lm .txt span{font-size:350px;color:var(--point-white);font-weight:600;display: inline-block;position: absolute;top:50%;line-height:1;opacity:0;transform:translateY(calc(-50% + 100px));transition:all 1s;transition-delay:1s;}
	.main_lm .txt span:nth-child(1){left:18%;}
	.main_lm .txt span:nth-child(2){right:18%;}
	.main_lm .prd{position: absolute;top:50%;left:50%;transform:translate(-54%, -50%);width:100%;}
	.main_lm .img, .main_lm .prd{opacity:0;transition:all 0.5s;transition-delay:1s;}
	.main_lm .prd{transition-delay:2.5s;}
	#wrap .main_content .main_lm .btn_box{transform:translateY(-98px);}
	
	.visual_container .visual_box{width:100%;}
	
	/*on*/
	.main_lm.on .img, .main_lm.on .prd{opacity:1;}
	.main_lm.on .prd{animation:lmPrd 3s ease-in Infinite Alternate;}
	@keyframes lmPrd{
		0%{top:45%;}
		50%{top:50%;}
		100%{top:45%;}
	}
	.main_lm.on .lm_obj{}
	.main_lm.on .txt span{opacity:1;transform:translateY(-50%);}
	.main_lm.on .txt span:nth-child(1){animation: txt1 1s linear 1;animation-fill-mode:both;animation-timing-function: linear;animation-delay:2s;}
	.main_lm.on .txt span:nth-child(2){animation: txt2 1s linear 1;animation-fill-mode:both;animation-timing-function: linear;animation-delay:2s;}
	@keyframes txt1{
		0%{left:18%}
		100%{left:0;}
	}
	@keyframes txt2{
		0%{right:18%}
		100%{right:0;}
	}
	
	/*cm*/
	.main_diagram{padding-bottom:160px;position: relative;}
	.main_diagram > a{position: absolute;top:-100px;}
	.main_diagram .img{display: flex;align-items: center;justify-content: center;}
	.main_diagram .img img{max-width:75%;}
	.main_diagram.int_diagram .img{padding-top:38px;}
	.main_diagram.int_diagram .img img{max-width:74%;}
	#wrap .main_content .main_diagram .btn_box{margin-top:39px;}
	
	@media only screen and (min-width:1024px){
		/*visual*/
		.main_visual_wrapper .dots li:hover{background:var(--point-color03);}
		.main_visual_wrapper .dots li:hover .img{display: none;}
		.main_visual_wrapper .dots li:hover p{display: block;color:var(--point-white);}
	}
	@media only screen and (max-width:1600px){
		/*visual*/
		.main_visual_wrapper{height:52vw;justify-content: space-between;}
		.main_visual_wrapper .visual_content{padding:50px 30px 50px 40px;position: static;}
		.main_visual_wrapper .main_visual{width:50%;height:100%}
		.main_visual_wrapper .main_visual:before{left:12.6%;}
		.main_visual_wrapper .main_visual:after{right:18.4%;}
	}
	@media only screen and (max-width:1450px){
		/*visual*/
		.main_visual_wrapper{height:60vw;flex-wrap:wrap;}
		.main_visual_wrapper .visual_content{width:45%;padding:40px 20px 40px 30px;align-items: flex-start;}
		.main_visual_wrapper .visual_content .txt_box span br{display: none;}
		.main_visual_wrapper .main_visual{width:55%;;}
		.main_visual_wrapper .main_visual:before{left:13.3%;}
		.main_visual_wrapper .main_visual:after{right:19.2%;}
	}
	@media only screen and (max-width:1300px){
		/*visual*/
		.main_visual_wrapper{height:70vw;justify-content: flex-end;}
		.main_visual_wrapper .visual_content{position: absolute;left:0;width:50%;}
		.main_visual_wrapper .visual_content .txt_box > h3 br, .main_visual_wrapper .visual_content .txt_box > p br{display: none;}
		.main_visual_wrapper .main_visual{width:68%;}
		.main_visual_wrapper .main_visual:before{left:38.2%;transform:skew(-25deg) rotate(1deg);}
		.main_visual_wrapper .main_visual:after{display: none;}
		.main_visual_wrapper .main_visual ul{position: relative;margin-right:0;}
		.main_visual_wrapper .main_visual ul li{width:100%;height:100%;position: absolute;top:0;left:0;opacity:0;transition:all 0.5s;transform:none;clip-path:polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%);}
		.main_visual_wrapper .main_visual ul li:not(.on){flex:1;opacity:0;}
		.main_visual_wrapper .main_visual ul li.on{flex:1;opacity:1;}
		.main_visual_wrapper .main_visual ul li .thumb img{transform:translate(-50%, -50%);}
		.main_visual_wrapper .main_visual ul li p{transform:translateY(100px);left:50px;}
		.main_visual_wrapper .main_visual ul li.on p{transform:translateY(0);}
	}
	@media only screen and (max-width:1200px){
		/*lm*/
		.main_lm .txt span{font-size:250px;}
	}
	@media only screen and (max-width:1100px){
		/*visual*/
		.main_visual_wrapper{height:80vw;}
		.main_visual_wrapper .main_visual:before{left:37.8%;transform:skew(-25deg) rotate(-3deg);}
	}
	@media only screen and (max-width:1024px){
		/*lm*/
		.main_lm{padding:100px 0 60px;}
		.main_lm .prd img{max-width:56%;}
		
		/*cm*/
		.main_diagram{padding-bottom:120px;}
		.main_diagram .img img{max-width:95%;}
		.main_diagram.int_diagram .img img{max-width:100%;}
	}
	@media only screen and (max-width:960px){
		/*visual*/
		.main_visual_wrapper .visual_content{width:60%;}
		.main_visual_wrapper .visual_content .visual_dots{margin-top:15px;}
		.main_visual_wrapper .dots li{width:50px;height:50px;}
		.main_visual_wrapper .dots li .img img{max-width:65%;max-height:65%;}	
		.main_visual_wrapper .visual_content .prd{width:190px;gap:0 20px;}
		.main_visual_wrapper .main_visual{width:60%;}
		.main_visual_wrapper .main_visual:before{left:37%;transform:skew(-25deg) rotate(-5.5deg);}
	}
	@media only screen and (max-width:860px){
		/*lm*/
		.main_lm .lm_obj{margin-top:-60px;;}
		.main_lm .txt{width:100%;}
		.main_lm .txt span{font-size:200px;}
		#wrap .main_content .main_lm .btn_box{transform:translateY(-70px);}
	}
	@media only screen and (max-width:767px){
		/*visual*/
		.main_visual_wrapper{height:auto;}
		.main_visual_wrapper .visual_content{position:relative;width:100%;padding:40px 20px 140px;}
		.main_visual_wrapper .visual_content:before{content:"";right: -27px;transform: skew(-25deg) rotate(10deg);z-index:3;width: 36px;top: 36px;height:30%;position: absolute;background: var(--point-grad04);}
		.main_visual_wrapper .visual_content .txt_box{width:75%;}
		.main_visual_wrapper .visual_content .txt_box > span{display: none;}
		.main_visual_wrapper .visual_content .prd{position: absolute;right:50px;bottom:35px;margin:0;z-index:5;}
		
		.main_visual_wrapper .main_visual{width:100%;height:63vw;overflow:hidden;}
		.main_visual_wrapper .main_visual:before{left: -30px;transform: skew(-25deg) rotate(10deg);z-index: 5;width: 36px;bottom: -87px;top: auto;height: 43%;}
		.main_visual_wrapper .main_visual ul li{clip-path:none;opacity:0 !important;z-index:-1 !important;}
		.main_visual_wrapper .main_visual ul li.swiper-slide-active{opacity:1 !important;z-index:3 !important;}
		.main_visual_wrapper .main_visual ul li.swiper-slide-active p {transform: translateY(0);bottom: auto;z-index:3;}
		.main_visual_wrapper .main_visual ul li .thumb img{width:100%;object-fit:cover;}
		.main_visual_wrapper .main_visual ul li#visual03 .thumb img{width:155%;}
		.main_visual_wrapper .main_visual ul li p{left:30px;bottom:auto;top:20px;transform:translateY(-100px);align-self: flex-start;clip-path:var(--polygon-path02);background:var(--point-color01);padding:4px 20px;;}
		.main_visual_wrapper .main_visual ul li.on p{transform:translateY(0);bottom:auto;}
		.main_visual_wrapper .main_visual ul li:not(.on) a{pointer-events:initial;}		
		
		.main_visual_wrapper .dots.pc_dots{display: none;}
		.main_visual_wrapper .m_dots{display:flex;}
		#wrap .main_visual_wrapper .dots li{opacity:1;border-radius:0;margin:0;}
	}
	@media only screen and (max-width:640px){
		.main_content .main_title p br{display: none;}
		
		/*lm*/
		.main_lm{padding:80px 0 50px;}
		.main_lm .lm_obj{margin-top:-40px;}
		.main_lm .txt span{font-size:150px;}
		#wrap .main_content .main_lm .btn_box{transform:translateY(-35px);}
		
		/*cm*/
		.main_diagram{padding-bottom:70px;}
		.main_diagram .diagram_box{flex-direction: column;margin-top:25px;}
		.main_diagram .diagram_box .active01{flex-direction: column;gap:0;}
		.main_diagram .diagram_box .active01 .arw{transform:rotate(90deg);margin:60px 0;}
		.main_diagram .diagram_box .active01 .arw img{height:45px;}
	}
	@media only screen and (max-width:479px){
		/*visual*/
		.main_visual_wrapper .visual_content{padding:25px 15px 90px;}
		.main_visual_wrapper .visual_content:before{right:-13px;top:62px;transform:skew(-25deg) rotate(2deg);width:26px;height:46%;}
		.main_visual_wrapper .visual_content .txt_box{width:86%;}
		.main_visual_wrapper .visual_content .txt_box h3, .main_visual_wrapper .visual_content .txt_box > p{font-size:150%;}
		.main_visual_wrapper .visual_content .txt_box > p{margin:8px 0;}
		.main_visual_wrapper .dots li p{font-size:11px;}
		.main_visual_wrapper .visual_content .prd{right:15px;bottom:37px;width:33%;}
		
		.main_visual_wrapper .main_visual{height:85vw;}
		.main_visual_wrapper .main_visual:before{left: -26px;transform: skew(-25deg) rotate(3deg);width: 26px;bottom: -66px;height: 43%;}
		.main_visual_wrapper .main_visual ul li .thumb img{max-height:initial;height:145%;width:207%;transform:translate(-64%, -50%);}
		.main_visual_wrapper .main_visual ul li#visual02 .thumb img{transform:translate(-58%, -50%);}
		.main_visual_wrapper .main_visual ul li#visual02 .thumb img{transform:translate(-58%, -50%);}
		.main_visual_wrapper .main_visual ul li p{font-size:100%;left:10px;top:10px;gap:6px;padding:4px 12px;}
		.main_visual_wrapper .main_visual ul li p:after{width:13px;height:10px;}
		
		.main_content .main_title h4{font-size:150%;padding-bottom:6px;}
		.main_content .main_title h4:before{height:3px;}
		
		.main_lm .txt span{transition-delay:0.6s;}
		.main_lm .img{transition-delay:0.6s;}
		.main_lm .prd{transition-delay:2.5s;}
		
		/*lm*/
		.main_lm{padding:100px 0;}
		.main_lm .lm_obj{margin-top:-15px;}
		.main_lm .txt span{font-size:90px;}
		#wrap .main_content .main_lm .btn_box{transform:translateY(-15px);}
		.main_diagram .img img{max-width:100%;}
		.main_diagram .main_title h4 img{height:28px;}
	}
	
	@media only screen and (max-width:320px){
		/*lm*/
		.main_lm .txt span{font-size:70px;}
	}