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

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

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

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

    @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 120px;}
    }
	@media screen and (max-width:479px) {
        #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; transition: 0.4s; transition-property: background, box-shadow;}
        #header.on{background: var(--point-white); box-shadow: 3px 3px 5px rgba(0,0,0,0.1);}
    #header .w_custom{max-width: 1800px; display: flex; align-items: center; justify-content: space-between; height: 120px;}
    #header .logo{height:100%; font-size:0;}
    #header .logo a{display: flex; align-items: center; height: 100%; padding:20px 0; box-sizing: border-box;}
    #header .gnb{position: absolute; top:0; left:50%; transform: translateX(-50%); width: calc(100% - 400px); height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;}
    #header .gnb > li{position: relative; font-size: var(--title-20); height:100%; padding:0 2.1vw;}
	#header .gnb > li > a{display: flex; align-items: center; justify-content: center; height: 100%; font-size: 90%; font-weight: 500; color: var(--black-color03); transition: all 0.4s;}
    #header .gnb > li > ul{position: absolute; top:100%; left:0; text-align: left; width: max-content; padding: 15px 0 15px 2.1vw; box-sizing: border-box; opacity: 0; pointer-events: none; transition: all 0.4s;display: flex;align-items: center;gap:0 20px;}
    #header .gnb > li > ul > li > a{display: block; font-size: 80%; padding:8px 0; color: var(--black-color06); transition: all 0.4s;}
    #header .gnb .thumb{position: absolute; top:20px; right:100%; padding:0; font-size: 0; border-radius: 10px; overflow: hidden; width: 250px; height: 150px;}
    #header .gnb .thumb img{width: 100%; height: 100%; object-fit: cover;}
    #header .link_wrap{display: flex; align-items: center; gap:5px 43px;}
    #header .lang_list{display: inline-flex; gap:5px 18px;}
    #header .lang_list > li{font-size: var(--title-20);}
    #header .lang_list > li > a{font-size: 80%; font-weight: 600; color: var(--black-color06);}
        #header .lang_list > li.on > a{color: var(--black-color03);}
    #header .menu_trigger{display: block;}

    .right_quick{position: fixed;top: 62%;right:-300px;transform: translateY(-50%);font-size: var(--title-20); transition: all 0.4s; display: flex; align-items: flex-start; z-index: 50;}
        .right_quick:has(.toggle_btn.on){right:0;}
    .right_quick .btn_list > li{width: 60px;}
    .right_quick .toggle_btn{width: 100%;background: var(--point-color01);border-radius: 30px 0 0;padding:30px 0;font-size: 90%;font-weight: 500;color: var(--point-white);writing-mode: tb-rl;display: flex;align-items: center;justify-content: center; gap: 10px;}
        .right_quick .toggle_btn:before{display: inline-flex;content:'';width: 6px;height: 6px;border:2px solid var(--trans-color);border-top-color: var(--point-white);border-left-color: var(--point-white);border-radius: 2px;transform: rotate(-45deg) translate(2px, 2px); transition: all 0.4s;}
        .right_quick .toggle_btn.on:before{transform: rotate(-45deg) translate(0) scale(-1,-1);}
    .right_quick .scr_top{display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; background: var(--black-color01); font-size: 0;}
    .right_quick .form_wrap{background: var(--black-color01); width: 300px; transition: all 0.4s; box-sizing: border-box; padding:30px; max-height: 75vh; overflow: hidden; overflow-y: auto;}
    .right_quick .form_wrap :where(table, tbody, tr, th, td){display: block; width: 100%;}
    .right_quick .form_wrap table{font-size: var(--title-20);}
    .right_quick .form_wrap table th{display: none;}
    .right_quick .form_wrap table td{font-size: 70%; font-weight: 400; color: var(--point-white); padding:5px 0;}
    .right_quick .form_wrap table strong{display: none;}
    .right_quick .form_wrap table :where(input[type="text"], input[type="password"]){width: 100%; border:0; height: 40px; padding:0 15px; box-sizing: border-box; font-size: inherit; background: var(--black-color02); color: inherit;}

    .right_quick .form_wrap table :where(input[type="text"], input[type="password"]):-webkit-autofill,.right_quick .form_wrap table :where(input[type="text"], input[type="password"]):-webkit-autofill:hover, input:-webkit-autofill:focus, .right_quick .form_wrap table :where(input[type="text"], input[type="password"]):-webkit-autofill:active{-webkit-text-fill-color:var(--point-white);}


     #wrap .right_quick .form_wrap table textarea{width: 100%; resize: none; font-size: inherit; padding:15px; box-sizing: border-box; background: var(--black-color02); color: inherit; border: 0;min-height:120px;}
    #wrap .right_quick .form_wrap table td:has(#password){display: none;}
    #wrap .right_quick .form_wrap table td .captcha_wrap{display: flex; flex-wrap: wrap; gap: 10px;}
    #wrap .right_quick .form_wrap #main-captcha-box{width: 180px;}
    #wrap .right_quick .form_wrap #main-refresh-code{position: relative; width: calc(100% - 190px); font-size: 0; background: var(--black-color02); border:0; cursor: pointer;padding:0;height:40px;}
    #wrap .right_quick .form_wrap #main-refresh-code:before{position: absolute; content:''; width:20px; height: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); background:url(../images/skin/icon_btn_reset.png) no-repeat center; background-size: 100% auto; filter: var(--filter-white);}
	#wrap .right_quick .form_wrap #main-captcha{margin-top:10px;}
    .right_quick .more_box{justify-content: center;}

    .right_quick .policy_cont > div label{color: var(--point-white); margin:0;}

	#wrap .right_quick .more_box{width:100%;margin-top:15px;}
	#wrap .right_quick .more_box .main_more{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;height:50px;width:100%;background:var(--point-white);font-size:15px;color:var(--black-color08);font-weight:500;}
	#wrap .right_quick .more_box .main_more span{display: block;font-size:inherit;color:inherit;font-weight:inherit;}

        /* over */
            @media screen and (min-width:1023px){
                #header:hover{background: var(--point-white);}
                #header .gnb > li:hover > a{color: var(--point-color01);}
                #header .gnb > li:hover > ul{opacity: 1; pointer-events: all;}
                #header .gnb > li > ul > li > a:hover{color: var(--black-color01);}

                #header:before{position: absolute; content:''; width: 100%; height: 100px; background: var(--gray-bg01); top:100%; left:0; opacity: 0; transition: all 0.4s; pointer-events: none;}
                #header:has(.gnb > li:hover):before{opacity: 1;}

				#wrap .right_quick .more_box .main_more:hover{background:var(--point-color01);color:var(--point-white);}
            }


    @media screen and (max-width:1300px){
        #header .gnb .thumb{width: 160px; height: 100px;}
    }
    @media screen and (max-width:1023px){
        #header .w_custom{height: 110px;}
        #header .gnb{display: none;}
        #header .link_wrap{gap:5px 38px;}

        .right_quick .btn_list > li{width: 55px;}
        .right_quick .scr_top{height: 55px;}
    }
    @media screen and (max-width:860px){
        #header .w_custom{height: 100px;}
        #header .link_wrap{gap:5px 30px;}

        .right_quick .btn_list > li{width: 50px;}
        .right_quick .toggle_btn{border-radius: 20px 0 0 0;}
        .right_quick .scr_top{height: 50px;}
    }
    @media screen and (max-width:640px){
        #header .w_custom{height: 90px;}
        #header .link_wrap{gap:5px 25px;}
        #header .lang_list{gap:5px 15px;}

        .right_quick{width: 100%; right: calc(-100% + 45px);}
            .right_quick:has(.toggle_btn.on){right: 0;}
            body:has(.toggle_btn.on){overflow: clip; touch-action: none;}
        .right_quick .btn_list > li{width: 45px;}
        .right_quick .toggle_btn{border-radius: 15px 0 0 0;}
        .right_quick .scr_top{height: 45px;}
        .right_quick .form_wrap{width: calc(100% - 45px);}
		#wrap .right_quick .form_wrap #main-refresh-code{width:40px;}
    }
    @media screen and (max-width:479px){
        #header .w_custom{height: 80px;}
        #header .link_wrap{gap:5px 20px;}
        #header .menu_trigger{width: 25px;}

        .right_quick{right: calc(-100% + 40px);}
        .right_quick .btn_list > li{width: 40px;}
        .right_quick .scr_top{height: 40px;}
        .right_quick .form_wrap{width: calc(100% - 40px);}
    }

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

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

───────────────────────────────────────────────────────────*/
	/* PC 일반 */
	#aside {overflow:hidden;top: -100%;right: 0;width:100%;transition:0.5s;height:100%;box-sizing:border-box;position:fixed;background:var(--black-color02);z-index:110;opacity: 0; pointer-events: none;}
    #aside .w_custom{max-width: 1800px;}
        #aside.on {top:0; opacity: 1; pointer-events: all;}
        body:has(#aside.on){overflow: clip; touch-action: none;}
	#aside .aside_box {height:100%; overflow:hidden; overflow-y:auto;position:relative;box-sizing:border-box;}

	#aside .aside_top {position: relative;display:flex;align-items:center;justify-content:space-between;height: 120px;}
	#aside .aside_right {display: flex; align-items: center; justify-content: center;}
	#aside .btn_aside_close {width: 27px;height: 27px;box-sizing: border-box;position:relative;}
	#aside .btn_aside_close .menu-trigger2 {width:100%;height:100%;display: block;}
	#aside .btn_aside_close .menu-trigger2 span {transition:0.3s;position:absolute;width:100%;height:2px;background:var(--point-white);left:0;top: 50%;transform: translateY(-50%);}
	#aside .btn_aside_close .menu-trigger2 span:nth-child(1) {transform:translateY(0) rotate(-45deg);}
	#aside .btn_aside_close .menu-trigger2 span:nth-child(2) {opacity:0;}
	#aside .btn_aside_close .menu-trigger2 span:nth-child(3) {transform:translateY(0) rotate(45deg);}
	
	#aside .aside_menu {width:100%;box-sizing:border-box;padding: 70px 10px;}
	#aside .aside_menu .slidemenu {width:100%;box-sizing:border-box;padding-left:40px;border-left: 1px solid rgba(255,255,255,0.2);}
	#aside .aside_menu .slidemenu a {position: relative;display: block;color: var(--point-white);opacity: 0.7;transition: all 0.4s;}
	#aside .aside_menu .slidemenu .icons {display: none; position:absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;}
	#aside .aside_menu .slidemenu .icons:before, #aside .aside_menu .slidemenu .icons:after {content: "";position: absolute;left: 50%;top: 50%;transform: translate(calc(-50% + 0.5px),calc(-50% + 0.5px));background: var(--point-white);}
	#aside .aside_menu .slidemenu .icons:before {width: 70%; height: 1px;}
	#aside .aside_menu .slidemenu .icons:after {width: 1px; height: 70%;}
	#aside .aside_menu .slidemenu .on > .icons:after {opacity: 0;}
	#aside .aside_menu .slidemenu > li {position: relative; display: flex; align-items: center; padding: 24px 0; font-size: var(--title-20);}
	#aside .aside_menu .slidemenu > li:before {content: "";position: absolute;left: -41px;top: 0;width: 1px;height: 0;background: var(--point-white);transition: all 0.3s;}
	#aside .aside_menu .slidemenu > li > a {width: 220px;font-size: 130%;}
	#aside .aside_menu .slidemenu .depth {display: flex; align-items: center; width: calc(100% - 220px);}
	#aside .aside_menu .slidemenu .depth > li + li {margin-left: 40px;}
	#aside .aside_menu .slidemenu .depth > li > a {font-size: 90%; font-weight: 300;}
	
	/* hover */
		@media only screen and (min-width:1024px) {
			#aside .aside_menu .slidemenu > li:hover:before {height: 100%;}
			#aside .aside_menu .slidemenu > li:hover > a {opacity: 1;}
			#aside .aside_menu .slidemenu > li:hover .depth > li > a {opacity: 1;}
			#aside .aside_menu .slidemenu > li .depth > li:hover > a {color: var(--point-color01);}
		}
		@media only screen and (min-width:641px) {
			#aside .aside_menu .slidemenu .depth {display: flex !important;}
		}
		
	@media only screen and (max-width:1023px) {
		#aside .aside_top {height: 110px;}
		#aside .aside_logo {width: 180px;}
		#aside .aside_link a {height: 38px;}
	
	}
	@media only screen and (max-width:860px) {
		#aside .aside_top {height: 100px;}
		#aside .aside_logo {width: 170px;}
		#aside .aside_link a {height: 36px;}
	
		
		#aside .aside_menu {padding: 55px 10px;}
		#aside .aside_menu .slidemenu {padding-left: 35px;}
		#aside .aside_menu .slidemenu > li {padding: 20px 0;}
		#aside .aside_menu .slidemenu > li > a {width: 200px;}
		#aside .aside_menu .slidemenu .depth {width: calc(100% - 200px);}
	}
	@media only screen and (max-width:640px) {
		#aside .w_custom{width: 100%; padding:0 15px;}
		
		#aside .aside_top {height: 90px;}
		#aside .aside_logo {width: 160px;}
		#aside .aside_link {position: absolute; left: 0; top: 93px; width: 100%; opacity: 0.8;}
		#aside .aside_link a {width: 100%; height: 38px;}
		#aside .aside_link a span {padding-top: 0;}
		
		#aside .aside_menu {padding: 75px 0 60px;}
		#aside .aside_menu .slidemenu {padding: 0; border: 0;}
		#aside .aside_menu .slidemenu a {opacity: 1;}
		#aside .aside_menu .slidemenu > li {display: block; padding: 0;}
		#aside .aside_menu .slidemenu > li > a {width: 100%; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,0.2); font-size: 120%;}
        #aside .aside_menu .slidemenu > li > a > .icons {display: block;}
		#aside .aside_menu .slidemenu .depth {display: none; width: 100%; box-sizing: border-box; padding: 15px 18px; background: rgba(255,255,255,0.2);}
		#aside .aside_menu .slidemenu .depth > li + li {margin-left: 0;}
		#aside .aside_menu .slidemenu .depth > li > a {padding: 12px 0;}
	}
	@media only screen and (max-width:479px) {
		#aside .aside_top {height: 80px;}
		#aside .aside_logo {width: 150px;}
		#aside .aside_link {top: 83px;}
		#aside .aside_link a {padding: 0 12px;}
		
		#aside .aside_menu {padding: 50px 0 60px;}
	}



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

	 MAIN | index.html

───────────────────────────────────────────────────────────*/
    #contents_wrap:has(.main_visual){width:100%; max-width: 100%; padding:0;}

	/* 비주얼 */    
        .main_visual{position: relative;}
        .main_visual .slick-slide{position: relative; height: 940px;}
        .main_visual .thumb{width: 100%; height: 100%; background: no-repeat center; background-size: cover;}
        .main_visual .txt_box{position: absolute;top: 49%;left:50%;transform: translate(-50%, -50%);z-index: 3;font-size: var(--title-20);}
        .main_visual .txt_box h2{font-size: 350%; font-weight: 400; color: var(--black-color01); line-height: 1.14; font-family: var(--font-type02);}
            .main_visual .txt_box h2 + p{margin-top: 29px;}
        .main_visual .txt_box h2 em{font-weight: 700;}
        .main_visual .txt_box p{font-size: 90%; font-weight: 400; color: var(--black-color06); line-height: 1.44;}
            .main_visual .txt_box p + p{margin-top: 10px;}
        .main_visual .txt_box p em{font-weight: inherit; color: var(--black-color03);}

        .main_visual .txtAni{transform: translateY(70px); opacity: 0; transition: all 1s; transition-delay: 0.2s;}
            .main_visual .txtAni + .txtAni{transition-delay: 0.4s;} 
            .main_visual .txtAni + .txtAni + .txtAni{transition-delay: 0.6s;} 
        .main_visual .active .txtAni{transform: translate(0); opacity: 1;}
        
        .main_visual .controller{position: absolute;left:50%;bottom: 25.6%;transform: translateX(-50%);display: flex;align-items: center;z-index: 9;gap: 15px;}
        .main_visual .slider-progress{position: relative;width: 340px;height: 1px;background: var(--black-color09);margin-right: 30px;}
        .main_visual .progress{position: absolute; top:0; left:0; height: 100%; background: var(--point-color01);}
        .main_visual .arrow{display: inline-flex;align-items: center;gap: 10px;}
        .main_visual .slick-arrow{font-size: 0;width: 15px;height: 15px;border: 2px solid var(--trans-color);border-left-color: var(--black-color03);border-top-color: var(--black-color03);transform: rotate(-45deg);border-radius: 3px;}
        .main_visual .slick-arrow.next{transform: rotate(-45deg) scale(-1,-1);}
        .main_visual .counter{display: inline-flex; align-items: center; gap:4px; font-family: var(--font-type03); font-size: var(--title-20); font-weight: 500; color: var(--black-color03);}
        .main_visual .counter span{font-size: 65%; opacity: 0.6;}
        .main_visual .counter .slideCountItem{opacity: 1;}

        @media screen and (max-width:1200px){
            .main_visual .slick-slide{height: 78vw; min-height: 400px;}
        }
        @media screen and (max-width:1023px){
            .main_visual .txt_box h2{font-size: 330%;}
                .main_visual .txt_box h2 + p{margin-top: 24px;}
            .main_visual .txt_box p + p{margin-top: 7px;}
        }
        @media screen and (max-width:860px){
            .main_visual .txt_box h2{font-size: 300%;}
                .main_visual .txt_box h2 + p{margin-top: 20px;}
            .main_visual .controller{bottom: 20%;}
        }
        @media screen and (max-width:640px){
            .main_visual .txt_box h2{font-size: 280%;}
                .main_visual .txt_box h2 + p{margin-top: 15px;}
            .main_visual .controller{bottom: 15%;}
            .main_visual .thumb{background-position: 70% 50%;}

            .main_visual .slider-progress{width: 300px; margin-right: 20px; }
            .main_visual .slick-arrow{width: 12px; height: 12px;}
        }
        @media screen and (max-width:479px){
            .main_visual .txt_box h2{font-size: 250%;}
            .main_visual .txt_box p{font-size: 80%;}
        }
        @media screen and (max-width:431px){
            .main_visual .txt_box h2{font-size: 220%;}
            .main_visual .txt_box p{font-size: 75%;}
            .main_visual .controller{bottom: 10%;}
        }
        @media screen and (max-width:360px){
            .main_visual .txt_box h2{font-size: 200%;}
            .main_visual .txt_box p{font-size: 70%;}
        }

    /* 공통 */
        .main_title{position: relative; font-size: var(--title-20); box-sizing: border-box;}
            .main_title.hd{margin-bottom: 73px;}
        .main_title h2{font-size: 250%; font-weight: 600; color: var(--black-color01); line-height: 1.2; letter-spacing: -0.03em;}
            .main_title h2 + h6{margin-top: 14px;}
            .main_title h2 + p{margin-top: 16px;}
        .main_title h6{font-size: inherit; font-weight: 400; color: var(--black-color06); line-height: 1.7; letter-spacing: -0.02em;}
        .main_title p{font-size: 90%; font-weight: 400; color: var(--black-color06); line-height: 1.7; letter-spacing: -0.02em;}

        .more_box{display: flex; flex-wrap: wrap; gap: 20px; font-size: var(--title-20);}
        .more_box .icon_btn{display: inline-flex; align-items: center; justify-content: center; text-align: center; padding:0 29px; height: 60px; border:2px solid var(--black-color03); border-radius: 30px; box-sizing: border-box; font-size: 80%; font-weight: 500; color: var(--black-color03); background: var(--point-white); transition: all 0.4s; font-family: inherit;}  
        .more_box .icon_btn span{position: relative; display: flex; align-items: center; gap: 10px; transition: all 0.4s;}
            .more_box .icon_btn span:after{display:inline-flex; content:''; background: no-repeat center; background-size: 100% auto;}
            .more_box .icon_btn.view span:after{width: 18px; height: 18px; background-image: url('../images/skin/view_icon.svg');}
            .more_box .icon_btn.dwn span:after{width: 20px; height: 20px; background-image: url('../images/skin/dwn_icon.svg');}
        .more_box .icon_btn.ani{border-color: var(--point-color01); box-shadow: 0 0 30px rgba(218, 30, 40, 0.20); color: var(--point-color01);}
        .more_box .icon_btn.ani span:after{display:none;}
        .more_box .icon_btn.ani .circle{position: relative; width: 9px; height: 9px; background: var(--point-color01); border-radius: 100%; margin:0 14px 0 29px;}
            .more_box .icon_btn.ani .circle:before, .more_box .icon_btn.ani .circle:after{position: absolute; content:''; width: 9px; height: 9px; background: var(--point-color01); border-radius: 100%; top:50%; left:7px; margin-top:-4.5px;}
            .more_box .icon_btn.ani .circle:after{left:14px;}

            .more_box .icon_btn.ani .circle, .more_box .icon_btn.ani .circle:before, .more_box .icon_btn.ani .circle:after{animation-name: iconAni; animation-duration:2s; animation-iteration-count:infinite; animation-direction:alternate;  animation-fill-mode: forwards; transition-timing-function:linear;}
            .icon_btn.ani .circle:before{animation-delay: 0.4s;}
            .icon_btn.ani .circle:after{animation-delay: 0.8s;}
            @keyframes iconAni {0% {background:rgba(218, 30, 40, 1);}100% {background:rgba(218, 30, 40, 0);}}

        .bullet_list{position: relative;font-size: var(--title-20);box-sizing: border-box;}
        .bullet_list > li{font-size: 85%;font-weight: 400;color: var(--black-color09); transition: all 0.4s;}
            .bullet_list > li + li{margin-top: 10px;}
            .bullet_list > li:before{display: inline-flex;content:'';width: 3px;height: 3px;background: var(--black-color09);border-radius: 100%;vertical-align: super;transform: translateY(2px); transition: all 0.4s;}
        .bullet_list > li > span{display: inline-block;width: calc(100% - 7px);padding-left: 8px;box-sizing: border-box;vertical-align: top;}

        #wrap .swiper_arw{position: relative; width: 60px; height: 60px; border:1px solid var(--border-color01); border-radius: 100%; box-sizing: border-box; top:auto; left:auto; right:auto; bottom:auto; background: var(--point-white); margin: 0; transition: all 0.4s;}
            #wrap .swiper_arw:before{position: absolute; content:''; width:14px; height: 14px; border:2px solid var(--trans-color); border-top-color: var(--black-color09); border-left-color: var(--black-color09); border-radius: 2px; box-sizing: border-box; top:50%; left:calc(50% + 4px); transform: translate(-50%, -50%) rotate(-45deg); transition: all 0.4s;}
            #wrap .swiper_arw:after{display: none;}
            #wrap .swiper_arw.swiper-button-next{transform: scale(-1,-1);}

        .gray_bg{position: relative; background: var(--gray-bg03); box-sizing: border-box;}

        /* over */
            @media screen and (min-width:1024px){
                .more_box .icon_btn:hover{border-color: var(--point-color01); background: var(--point-color01); box-shadow: 0 0 30px rgba(218, 30, 40, 0.2);}
                .more_box .icon_btn:hover span{filter: var(--filter-white);}
                
                .bullet_list > li:hover{color: var(--black-color03);}
                .bullet_list > li:hover:before{background: var(--black-color03);}

                #wrap .swiper_arw:hover{background: var(--black-color01); border-color: var(--black-color01);}
                #wrap .swiper_arw:hover:before{filter: var(--filter-white);}
            }

        @media screen and (max-width:1023px){
            .main_title.hd{margin-bottom: 63px;}
            .main_title h2 + h6{margin-top: 9px;}
            .main_title h2 + p{margin-top: 12px;}

            .more_box{gap:15px;}
            .more_box .icon_btn{padding:0 25px; height: 55px;}
            .more_box .icon_btn.ani .circle{margin:0 14px 0 20px;}

            #wrap .swiper_arw{width: 55px; height: 55px;}
        }
        @media screen and (max-width:860px){
            .main_title.hd{margin-bottom: 53px;}

            #wrap .swiper_arw{width: 50px; height: 50px;}
        }
        @media screen and (max-width:640px){
            .main_title.hd{margin-bottom: 43px;}
            .main_title h2 + p{margin-top: 7px;}

            .more_box{gap:10px;}
            .more_box .icon_btn{padding:0 20px; height: 50px;}
            .more_box .icon_btn.ani .circle,  .more_box .icon_btn.ani .circle:before, .more_box .icon_btn.ani .circle:after{width: 8px; height: 8px;}
            .more_box .icon_btn.ani .circle{margin:0 14px 0 12px;}
            .more_box .icon_btn.ani .circle:before, .more_box .icon_btn.ani .circle:after{margin-top: -4px;}
            .more_box .icon_btn.ani .circle:before{left:6px;}
            .more_box .icon_btn.ani .circle:after{left:12px;}

            #wrap .swiper_arw{width: 45px; height: 45px;}
                #wrap .swiper_arw:before{width: 12px; height: 12px; left: calc(50% + 2px);}
        }
        @media screen and (max-width:479px){
            .main_title.hd{margin-bottom: 33px;}
            .more_box .icon_btn.ani .circle,  .more_box .icon_btn.ani .circle:before, .more_box .icon_btn.ani .circle:after{width: 7px; height: 7px;}
            .more_box .icon_btn.ani .circle{margin:0 12px 0 10px;}
            .more_box .icon_btn.ani .circle:before, .more_box .icon_btn.ani .circle:after{margin-top: -3.5px;}
        }

    /* 제품 */
        .main_product{position: relative; padding:130px 0; box-sizing: border-box; overflow: hidden;}
        .main_product .w_custom{display: flex;}
        .main_product .main_title{width: 42.2%;padding: 55px 30px 160px 0;}
        .main_product .more_box{margin-top: 39px;}
        .main_product .prod_wrap{width: 57.8%;}
        .main_product .prodSwiper{overflow: hidden;width: calc(100% + 13.51vw);padding-right: 8.34vw;box-sizing: border-box;}
        .main_product .prodSwiper .swiper-slide{position: relative;width: 23vw; height: 27.7vw; }
            .main_product .prodSwiper .swiper-slide:not(:last-child){margin-right:20px;}
        .main_product .prodSwiper .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        .main_product .prodSwiper .thumb{font-size: 0;width: 100%;height: 100%;border-radius: 20px;overflow: hidden;background: var(--gray-bg01);transition: all 0.4s;display: flex;align-items: center;justify-content: center;}
        .main_product .prodSwiper .desc{position: absolute; top:60px; left:50px; width:calc(100% - 100px); font-size: var(--title-20);}
        .main_product .prodSwiper .desc dt{font-size: 170%;font-weight: 600;color: var(--black-color01);line-height: 1.2;transition: all 0.4s;width:90%;}
            .main_product .prodSwiper .desc dt + dd{margin-top: 12px;}
        .main_product .prodSwiper .desc dd{font-size: 90%; font-weight: 400; color: var(--black-color06); transition: all 0.4s;}
        .main_product .prodSwiper .arw{position: absolute; top:75px; right:50px; font-size: 0; transform: translateX(50px); opacity: 0; transition: all 0.4s;}

        .main_product .link_list{position: absolute;top: 72%;left:0;padding:10px 0 10px;box-sizing: border-box;display: flex;flex-direction: column;gap: 24px;width: 100%;}
            .main_product .link_list:before{position: absolute; content:''; width:4px; height:100%; background: var(--border-color01); top:0; left:0;}
        .main_product .link_list > li{position: relative;font-size: var(--title-20);padding-left: 26px;box-sizing: border-box;line-height: 1.2;}
            .main_product .link_list > li:before{position: absolute;content:'';width:4px;height:100%;background: var(--point-color01);top:0;left:0; opacity: 0; transition: all 0.4s;}
            .main_product .link_list > li.on:before{opacity: 1;}
            .main_product .link_list > li.on > a{color: var(--point-color01);}
        .main_product .link_list > li > a{font-size: inherit;font-weight: 500;color: var(--black-color06);}
        .main_product .link_list .bullet_list{padding: 12px 0 3px 10px;display: none;}
        .main_product .link_list .bullet_list > li small{font-size: 76.4%;}

        /* over */
            @media screen and (min-width:1024px){
                .main_product .prodSwiper .swiper-slide:hover .thumb{background: var(--point-color01);}
                .main_product .prodSwiper .swiper-slide:hover .desc :is(dt, dd){filter: var(--filter-white);}
                .main_product .prodSwiper .swiper-slide:hover .arw{opacity: 1; transform: translate(0);}
            }

        @media screen and (max-width:1640px){
            .main_product .prodSwiper{padding-right: 13.51vw;}
        }
        @media screen and (max-width:1480px){
            .main_product .main_title{padding-top: 40px;}
            .main_product .prodSwiper{width: calc(100% + 60px); padding-right: 60px;}
            .main_product .prodSwiper .swiper-slide{width: calc(100% / 2 - 10px); height:35vw; min-height: 400px;}
            .main_product .prodSwiper .desc{top:50px; left:40px;}
            .main_product .prodSwiper .arw{top:65px; right:40px;}
        }
        @media screen and (max-width:1200px){
            .main_product .main_title{padding-top: 30px;}
            .main_product .prodSwiper .desc{top:40px;}
            .main_product .prodSwiper .desc dt{font-size: 150%;}
            .main_product .prodSwiper .desc dd{font-size: 85%;}
            .main_product .prodSwiper .arw{top:55px;}
        }
        @media screen and (max-width:1023px){
            .main_product .w_custom{flex-direction: column; gap:40px;}
            .main_product .main_title{width: 100%; padding:0;}
            .main_product .more_box{margin-top:34px;}
            .main_product .link_list{position: relative; top:auto; left:0; margin-top:40px;}
            .main_product .link_list .bullet_list{display: block !important;}
            .main_product .prod_wrap{width: 100%;}
            .main_product .prodSwiper{width: calc(100% + 30px); margin-left:-15px; padding:0 15px;}
            .main_product .prodSwiper .swiper-slide{width: 43vw;height: 52vw;min-height: 350px;}
            .main_product .prodSwiper .swiper-slide:not(:last-child){margin-right: 15px;}
            .main_product .prodSwiper .desc{width: calc(100% - 80px);}
			.main_product .prodSwiper .desc dt{width:100%;}
        }
        @media screen and (max-width:860px){
            .main_product .prodSwiper .desc{top:35px; left:35px; width: calc(100% - 70px);}
        }
        @media screen and (max-width:640px){
            .main_product{padding: 100px 0;}
            .main_product .more_box{margin-top: 29px;}
            .main_product .link_list{margin-top: 35px; gap: 20px;}
            .main_product .link_list > li{padding-left: 22px;}
            .main_product .prodSwiper .thumb{border-radius: 10px;}
            .main_product .prodSwiper .desc{top:30px; left:30px; width: calc(100% - 60px);}
        }
        @media screen and (max-width:479px){
            .main_product{padding: 70px 0;}
            .main_product .more_box{margin-top: 24px;}
            .main_product .link_list{margin-top: 30px; gap: 15px;}
            .main_product .prodSwiper .swiper-slide{width: 75vw;height: 94vw;}
        }

    /* 기술 */
        .main_tech{position: relative; background: url('../images/skin/main_tach_bg.jpg') no-repeat center; background-size: cover; padding:130px 0; overflow: hidden;}
        .main_tech .main_title :is(h2, h6){filter: var(--filter-white);}
        .main_tech .main_title h6{opacity: 0.8;}
        .main_tech .techSwiper{position: relative; }
        .main_tech .techSwiper .swiper-wrapper{counter-reset: item}
        .main_tech .techSwiper .swiper-slide{display: flex; align-items: center; width:100%; height: auto; box-sizing: border-box;}
        .main_tech .techSwiper .thumb{font-size: 0; width: 600px; height: 600px; border-radius: 30px; overflow: hidden;}
        .main_tech .techSwiper .thumb img{width: 100%; height: 100%; object-fit: cover;}
        .main_tech .techSwiper .txt_wrap{position: relative;width: calc(100% - 600px);padding: 0 30px 8px 4.7vw;box-sizing: border-box;}
        .main_tech .techSwiper .desc{position: relative; font-size: var(--title-20);}
            .main_tech .techSwiper .desc:before{position: absolute;content: counter(item, decimal-leading-zero);counter-increment: item;top: -25px;left: -24px;font-size: 300%;font-weight: 500;color: rgba(255,255,255,0.1);line-height: 1;letter-spacing: -0.04em;}
        .main_tech .techSwiper .desc dt{font-size: 200%; font-weight: 600; color: var(--point-white);}
        .main_tech .techSwiper .desc dt + dd{margin-top: 36px;}
		.main_tech .techSwiper .bullet_list > li{font-size:80%;}
        .main_tech .techSwiper .more_box{margin-top: 62px;}
        .main_tech .techSwiper .more_box .icon_btn.ani{border:0;}

        @media screen and (max-width:1480px){
            .main_tech .techSwiper .thumb{width: 40vw; height: 40vw;}
            .main_tech .techSwiper .txt_wrap{width: calc(100% - 40vw); padding:0 30px 0 70px}
        }
        @media screen and (max-width:1200px){
            .main_tech .techSwiper .txt_wrap{padding:0 20px 0 60px}
            .main_tech .techSwiper .desc dt + dd{margin-top: 30px;}
            .main_tech .techSwiper .more_box{margin-top: 50px;}
        }
        @media screen and (max-width:1023px){
            .main_tech .techSwiper .txt_wrap{padding:0 15px 0 50px}
            .main_tech .techSwiper .desc dt + dd{margin-top: 25px;}
            .main_tech .techSwiper .more_box{margin-top: 40px;}
        }
        @media screen and (max-width:860px){
            .main_tech .techSwiper .swiper-slide{flex-direction: column; gap: 40px; align-items:flex-start; width: 72%; padding-right: 15px;}
            .main_tech .techSwiper .thumb{width: 100%; height: auto; border-radius: 20px;}
            .main_tech .techSwiper .thumb img{height: auto;}
            .main_tech .techSwiper .txt_wrap{width: 100%; padding:0 0 0 20px;}
        }
        @media screen and (max-width:640px){
            .main_tech{padding:100px 0;}
            .main_tech .techSwiper .swiper-slide{width: 97%;}
            .main_tech .techSwiper .thumb{border-radius: 15px;}
            .main_tech .techSwiper .txt_wrap{width: 100%; padding:0 0 0 20px;}
            .main_tech .techSwiper .desc dt + dd{margin-top: 20px;}
            .main_tech .techSwiper .more_box{margin-top: 35px;}
        }
        @media screen and (max-width:479px){
            .main_tech{padding:70px 0;}
            .main_tech .techSwiper .swiper-slide{width: 100%;}
            .main_tech .techSwiper .desc:before{font-size: 250%; top: -17px; left: -20px;}
            .main_tech .techSwiper .desc dt{font-size: 170%;}
            .main_tech .techSwiper .desc dt + dd{margin-top: 15px;}
        }

    /* 글로벌 */
        .main_global{padding: 126px 0 90px;}
        .main_global .main_title{padding-right: 370px;}
        .main_global .marker_info{position: absolute;right:0;bottom: 8px;display: flex;flex-wrap: wrap;gap:15px 30px;}
        .main_global .marker_info dl{display: flex; align-items: center; font-size: var(--title-20); gap:11px;}
        .main_global .marker_info dl dt{font-size: 0; width: 15px; height: 15px; border-radius: 100%; background: var(--point-color02);}
            .main_global .marker_info dl:nth-child(2) dt{background: var(--point-color01);}
            .main_global .marker_info dl:nth-child(3) dt{background: var(--gray-bg02);}
        .main_global .marker_info dl dd{font-size: 75%; font-weight: 400; color: var(--black-color09); letter-spacing: -0.03em;}
        .main_global .map_desc{position: relative;font-size: 0;width: fit-content;margin: -0.6vw auto 0;}
        .main_global .map_desc dd{position:absolute;top: 0;left:0;width: 100%;height: 100%;}
        .main_global .map_desc .marker{position: absolute;top: 0;left: 0;}
            .main_global .map_desc .marker:before{position: absolute;content: '';top: 29%;left: 39.5%;width: 2px;height: 70px;background: var(--point-color02);}
        .main_global .map_desc .marker .circle{position: absolute;content: '';top: calc(29% + 70px);left: calc(39.5% - 5px);width: 12px;height: 12px;border-radius: 100%;background: var(--point-color02);}
        .main_global .map_desc .marker .circle:before, .main_global .map_desc .marker .circle:after{position: absolute; content:''; width: 283%; height: 283%; background: var(--point-color02); opacity: 0; top:50%; left:50%; transform: translate(-50%, -50%); border-radius: 100%;}
        .main_global .map_desc .marker .circle:after{width: 416%; height: 416%;}

            .main_global .map_desc .marker .circle:before, .main_global .map_desc .marker .circle:after{animation-name: markerAni; animation-duration:1.5s; animation-iteration-count:infinite; animation-direction:alternate;  animation-fill-mode: forwards; transition-timing-function:linear;}
            @keyframes markerAni {0% {opacity:0;}100% {opacity:0.4;}}

        @media screen and (max-width:1480px){
            .main_global .map_desc .marker:before{height: 5.3vw;}
            .main_global .map_desc .marker .circle{width: 0.82vw;height: 0.82vw;top: calc(29% + 4.8vw);left: calc(39.5% - 0.35vw);}
        }
        @media screen and (max-width:1100px){
            .main_global .main_title{padding-right: 0;}
            .main_global .marker_info{position: relative; right:auto; bottom:auto; margin-top:30px;}
        }
        @media screen and (max-width:640px){
            .main_global{padding:100px 0;}
            .main_global .main_title h6 br{display:none;}
            .main_global .marker_info{gap:10px 25px;}
            .main_global .marker_info dl{gap:8px;}
            .main_global .marker_info dl dt{width: 13px; height: 13px;}
        }
        @media screen and (max-width:479px){
            .main_global{padding:70px 0;}
            .main_global .marker_info{margin-top: 25px;}
            .main_global .marker_info{gap:10px 20px;}
            .main_global .marker_info dl{gap:7px;}
            .main_global .marker_info dl dt{width: 12px; height: 12px;}
        }

    /* 파트너스 */
        .main_partners{padding:0 0 140px;}
        .main_partners .controller{position: absolute; right:0; bottom:0; display: flex; gap:10px;}
        .main_partners .partnerSwiper{overflow: hidden;height: 200px;margin-top: -0.8vw;}
        .main_partners .partnerSwiper .swiper-slide{border:1px solid var(--border-color01); border-radius: 10px; box-sizing: border-box; overflow: hidden; display: flex; align-items: center; justify-content: center; height: calc(100% / 2 - 10px);}
        .main_partners .partnerSwiper .swiper-slide img{max-height: none; object-fit: cover;}

        @media screen and (max-width:1023px){
            .main_partners{padding-bottom: 120px;}
            .main_partners .partnerSwiper{height: 180px;}
            .main_partners .partnerSwiper .swiper-slide{height: calc(100% / 2 - 7.5px);}
        }
        @media screen and (max-width:860px){
            .main_partners .main_title.hd{margin-bottom: 20px;}
            .main_partners .partnerSwiper{height: 170px; margin-top: 0;}
            .main_partners .controller{position: relative; right:auto; bottom:auto; margin-top:40px;}
        }
        @media screen and (max-width:640px){
            .main_partners{padding-bottom: 100px;}
            .main_partners .main_title p br{display: none;}
            .main_partners .partnerSwiper{height: 160px;}
            .main_partners .partnerSwiper .swiper-slide{border-radius: 5px;}
            .main_partners .controller{margin-top:25px;}
        }
        @media screen and (max-width:479px){
            .main_partners{padding-bottom: 70px;}
            .main_partners .partnerSwiper{height: 150px;}
        }
        @media screen and (max-width:360px){
            .main_partners .partnerSwiper{height: 140px;}
            .main_partners .partnerSwiper .swiper-slide{height: calc(100% / 2 - 5px);}
        }

    /* 뉴스 */
        .main_news{padding: 119px 0 130px;}
        .main_news .main_title{padding-right:230px;}
        .main_news .more_box{position: absolute; top:50%; right:0; transform: translateY(-50%);}
        .main_news .notice_wrap{margin-top: -1.6vw;}
        .main_news .notice_list{border-top: 1px solid var(--black-color03);}
        .main_news .notice_list > li{position: relative;border-bottom: 1px solid var(--border-color01);padding: 28px 0;box-sizing: border-box;display: flex;align-items: center;font-size: var(--title-20);transition: all 0.4s;}
        .main_news .notice_list .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        .main_news .notice_list .date{width: 15.2%;font-size: 90%;font-weight: 600;color: var(--point-color01);text-align: center;box-sizing: border-box;}
        .main_news .notice_list .desc{width: 84.8%;padding-right: 13vw;box-sizing: border-box;}
        .main_news .notice_list .desc dt{font-size: 130%;font-weight: 600;color: var(--black-color01);line-height: 1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing: -0.03em;}
            .main_news .notice_list .desc dt + dd{margin-top: 16px;}
        .main_news .notice_list .desc dd{font-size: 90%; font-weight: 400; color: var(--black-color06); line-height: 1.8; white-space:normal; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
        .main_news .notice_list .arw{position: absolute; top:50%; right:60px; width: 50px; height: 50px; border-radius: 100%; background: var(--black-color01); display: flex; align-items: center; justify-content: center; margin-top: -25px; opacity: 0; transform: translateX(50px); transition: all 0.4s;}
        .main_news .video_wrap{position: relative; font-size: 0; border-radius: 30px; overflow: hidden; margin-top: 130px;}
        .main_news .video_wrap > img{min-height: 200px; object-fit: cover;}
        .main_news .video_wrap .play_btn{position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); filter: var(--filter-white);}
            .main_news .video_wrap .play_btn:before{position: absolute; content:''; width: 125%; height: 125%; border:1px dotted var(--point-color01); border-radius: 100%; top:50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box;}
        .main_news .video_wrap .play_btn img{width: 100%;}

        /* over */
            @media screen and (min-width:1024px){
                .main_news .notice_list > li:hover{background: var(--point-white);}
                .main_news .notice_list > li:hover .arw{opacity: 1; transform: translateX(0);}
                .main_news .video_wrap .play_btn{width: 80px; transition: all 0.4s;}
                .main_news .video_wrap .play_btn:hover{width: 110px; }
            }

        @media screen and (max-width:1023px){
            .main_news .notice_list .desc dt + dd{margin-top: 12px;}
        }
        @media screen and (max-width:860px){
            .main_news .main_title{padding-right: 0;}
                .main_news .main_title.hd{margin-bottom: 20px;}
            .main_news .more_box{position: relative; top: auto; right:auto; transform: none; margin-top: 30px;}
            .main_news .notice_wrap{margin-top: 0;}
            .main_news .notice_list > li{flex-direction: column; gap: 15px; align-items: flex-start; }
            .main_news .notice_list .date{width: 100%; text-align: left;}
            .main_news .notice_list .desc{width: 100%; padding-right: 15px;}
            .main_news .notice_list .desc dt + dd{margin-top: 7px;}
            .main_news .notice_list .desc dd{line-height: 1.6;}
            .main_news .video_wrap{margin-top: 100px; border-radius: 20px;}
            .main_news .video_wrap .play_btn{width: 70px;}
        }
        @media screen and (max-width:640px){
            .main_news{padding: 100px 0;}
            .main_news .notice_list > li{padding:24px 0;}
            .main_news .video_wrap{margin-top: 70px; border-radius: 15px;}
            .main_news .video_wrap .play_btn{width: 60px;}
        }
        @media screen and (max-width:479px){
            .main_news{padding: 70px 0;}
            .main_news .notice_list > li{padding:20px 0; gap:10px;}
            .main_news .video_wrap .play_btn{width: 50px;}
        }

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

	footer | outline/footer.html

───────────────────────────────────────────────────────────*/
    #footer{position: relative; background: var(--black-color01); padding:70px 0 100px; box-sizing: border-box;}
    #footer .w_custom{display: flex; flex-wrap: wrap; gap:30px 100px; padding-right: 250px;}
    #footer .logo{font-size: 0;}
    #footer .info_list{display: flex; flex-direction: column; gap:7px;}
    #footer .info_list > li{display: flex; flex-wrap: wrap; gap:7px 30px;}
    #footer .info_list .desc{display: inline-flex; font-size: var(--title-20); gap:0 4px;}
    #footer .info_list .desc :where(dt, dd){font-size: 80%; font-weight: 300; color: rgba(255,255,255,0.8);}
    #footer .info_list .desc dt{flex-shrink: 0;}
    #footer .copy{display: flex; flex-wrap: wrap; gap:7px 30px; font-size: var(--title-20); margin-top: 21px;}
    #footer .copy :where(dt, dd){font-size: 80%; font-weight: 300; color:rgba(255,255,255,0.5);}
    #footer .link_list{position: absolute; top:0; right:0; display: flex; gap:7px 20px;}
    #footer .link_list > li{font-size: var(--title-20); display: flex; align-items: center; gap: 7px 20px;}
        #footer .link_list > li:not(:last-child):after{display: inline-flex; content:''; width: 4px; height: 4px; border-radius: 100%; background: rgba(255,255,255,0.3);}
    #footer .link_list > li > a{font-size: 90%; font-weight: 300; color: var(--point-white);}
    #footer .link_list > li > a strong{font-weight: 500;}

    @media screen and (max-width:1480px){
        #footer .w_custom{gap:30px 6.5vw;}
    }
    @media screen and (max-width:860px){
        #footer .w_custom{gap:30px 50px; padding-right: 0;}
        #footer .link_list{position: relative; top:auto; right:auto; padding-top: 10px;}
    }
    @media screen and (max-width:640px){
        #footer{padding:50px 0 70px;}
        #footer .w_custom{gap:25px 50px;}
    }