/* 서브 상단 */ .Sub_Path{ width:100%; height:var(--Path-h); float: left; position: relative; display: flex; justify-content: center; align-items: center ; background:var(--Path-bg); z-index: 1} .Sub_Path.none{ display: none!important} .Sub_Path .Inner{ padding: 0px!important; height:100%; display: flex; justify-content: center; align-items: center; position: relative} .Sub_Topbg{ width:100%; aspect-ratio:var(--Sub-Topbg-h); float: left; position: relative; overflow: hidden; z-index: 0; display: flex; justify-content: center; align-items: center; background-color:var(--Path-bg-in)} .Sub_Topbg .Inner{ height: 100%!important; display: flex; justify-content: center; align-items: center; flex-direction: column; padding-top: var(--header-h) ; } .Submain_Topbg{ width:100%; aspect-ratio:var(--Submain-Topbg-h); float: left; position: relative; overflow: hidden; z-index: 0; display: flex; justify-content: center; align-items: center; background-color:var(--Path-bg-in)} .Submain_Topbg .Inner{ height: 100%!important; display: flex; justify-content: center; align-items: center; flex-direction: column; } .PageGo{width:100%; float: left; display: flex;flex-direction: row; } .PageGo .gohome{width:var(--Path-h); height:var(--Path-h); display: flex; justify-content: center; align-items: center; float: left; display: flex; } .PageGo .gohome:before{content: "\eca5"; font-family: unicons-line; width:var(--Path-h); height:var(--Path-h); display: flex; justify-content: center; align-items: center; float: left; display: flex; color: #fff; font-size: 25px} /**** 모바일 ****/ @media only all and (max-width:768px) { .Sub_Path{ width:100%; height:var(--Path-h); float: left; position: relative; display: flex; justify-content: center; align-items: center ; background:var(--Path-bg); z-index: 1} .Sub_Path .Inner{ width:100%; margin: 0px;} .PageGo{ display: grid; grid-template-columns:40px auto auto ; grid-gap: 0px} } .PageGo_dep1 {min-width:var(--Path-w); float:left; position: relative; display: block; border-left: 1px solid rgba(255,255,255,0.08); } .PageGo_dep1 .Dep1_tit{ width:100%; float: left; color: #fff; /* Old browsers */ line-height:var(--Path-h); text-align: left; box-sizing: border-box ; background-color:var(--Path-bg-in)!important; padding-left: 15px; box-sizing: border-box; position: relative; font-size: var(--Path-font-size); height:var(--Path-h)!important} .PageGo_dep1 .Dep1_tit:before{ content: "\eb3a"; font-family: unicons-line; position: absolute; right: 10px; top: -3px; color: #fff;font-size: 20px;} .PageGo_dep1 ul { width:100%; float: left } .PageGo_dep1 ul>li{ width:100%; float: left;color: #fff; background-color:var(--Path-bg-in)!important; line-height: 40px; text-align:left;font-size: var(--Path-font-size); cursor: pointer; padding: 0px 0px; border: 1px solid rgba(255,255,255,0.08); margin-right: -1px; margin-bottom: -1px; box-sizing: border-box; padding-left: 15px; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; } .PageGo_dep1 ul>li:hover{ background-color:var(--Path-bg-in)!important; filter: brightness(125%);} .PageGo_dep1 ul.mysub_b{width:100%; float: left; display: none;position: absolute; top: var(--Path-h); left: 0px;z-index: 99999999 } .PageGo_dep1 ul.mysub_b_on{width:100%;float: left; display: block;position: absolute; top:var(--Path-h); left: 0px } .PageGo_dep1 ul li a{ color: #fff; font-size: var(--Path-font-size); text-align: left } .PageGo_dep1 ul li.smenu{ width:100%; float:left; padding-top: 10px ; padding-bottom: 10px} .PageGo_dep1 ul li.smenu a{ width:100%; float:left;height: 25px; line-height: 25px; color: rgba(255,255,255,0.5); padding-left: 10px; position: relative; box-sizing: border-box; } .PageGo_dep1 ul li.smenu a.on{ color: var(--div-color1)!important; } .PageGo_dep1 ul li.smenu a:hover{color: rgba(255,255,255,1); } .PageGo_dep1 ul li.smenu a:before{ content: "-"; position: absolute; left: 0px; top: 0px} /* 2뎁스 */ .PageGo_dep2 {min-width:var(--Path-w); float:left; position: relative; padding-right: 0px; border-left: 1px solid rgba(255,255,255,0.08); margin-left: -1px} .PageGo_dep2 .Dep2_tit{ width:100%; float: left; color: #fff; /* Old browsers */ line-height: var(--Path-h); text-align: left; box-sizing: border-box ; background-color:var(--Path-bg-in)!important; padding-left: 15px; box-sizing: border-box; position: relative; font-size: var(--Path-font-size); height:var(--Path-h)!important} .PageGo_dep2 .Dep2_tit:before{ content: "\eb3a"; font-family: unicons-line; position: absolute; right: 10px; top: -3px; color: #fff;font-size: 20px;} .PageGo_dep2 ul { width:100%; float: left } .PageGo_dep2 ul>li{ width:100%; float: left;color: #fff; background-color:var(--Path-bg-in)!important; line-height:40px; text-align:left; font-size: var(--Path-font-size); cursor: pointer; padding: 0px 0px; border: 1px solid rgba(255,255,255,0.08); margin-right: -1px; margin-bottom: -1px; box-sizing: border-box; padding-left: 15px; } .PageGo_dep2 ul>li:hover{ background-color:var(--Path-bg-in)!important; filter: brightness(125%);} .PageGo_dep2 ul.mysub{width:100%; float: left; display: none;position: absolute; top:var(--Path-h); left: 0px;z-index: 99999999 } .PageGo_dep2 ul.mysub_on{width:100%;float: left; display: block;position: absolute; top:var(--Path-h); left: 0px } .PageGo_dep2 ul li a{ color: #fff; font-size:var(--Path-font-size); text-align: left } .PageGo_dep2 ul li.smenu{ width:100%; float:left; padding-top: 10px ; padding-bottom: 10px} .PageGo_dep2 ul li.smenu a{ width:100%; float:left;height: 25px; line-height: 25px; color: rgba(255,255,255,0.5); padding-left: 10px; position: relative; box-sizing: border-box; } .PageGo_dep2 ul li.smenu a.on{ color: var(--div-color1)!important; } .PageGo_dep2 ul li.smenu a:hover{color: rgba(255,255,255,1); } .PageGo_dep2 ul li.smenu a:before{ content: "-"; position: absolute; left: 0px; top: 0px} /* 구분 start -----------------------------------*/ /**** pc ****/ @media only all and (min-width:961px) { .Dep01_Tit{ width:100%;float:left; position: relative; z-index: 999999; margin-bottom: 20px } .Dep01_Tit .Tit_b{ width:100%; loat:left; color:#333; letter-spacing:-1px; text-align:left; height: 56px; overflow: hidden; margin-bottom: 15px; position: relative} .Dep01_Tit .Tit_b span{ width:100%; loat:left; color:#333; letter-spacing:-1px; text-align:left; font-family: 'Myriad Pro', sans-serif; font-weight:700; font-size:56px; line-height: 120%; letter-spacing: -2px; -webkit-animation-name: Tit_b_ani;-webkit-animation-duration: 1s; animation-name: Tit_b_ani;animation-duration: 1s; position: absolute; left: 0px; ; text-transform:uppercase;} .Dep01_Tit .Tit_s{ width:100%; font-size:var(--f-15); font-weight:400; height: 20px; overflow: hidden;position: relative} .Dep01_Tit .Tit_s span{ width:100%; color:#333; font-size:var(--f-15); letter-spacing:0px; text-align:left; line-height:20px;; -webkit-animation: Tit_s_ani 0.5s forwards; /* Safari 4.0 - 8.0 */ animation: Tit_s_ani 0.5s forwards; animation-delay:0.5s; position: absolute; left: 0px; top: 20px} .Dep01_Tit .Tit_s span em{ padding: 0px 5px; color: #999; font-family: 'Myriad Pro', sans-serif;} } /**** pc2 ****/ @media all and (max-width:1500px) and (min-width:961px) { .Dep01_Tit{ width:100% !important;float:left; padding: 30px 0px!important;} .Dep01_Tit .Tit_b{ width:100%; loat:left; color:#333; letter-spacing:-1px; text-align:left; height: 40px; overflow: hidden; margin-bottom: 5px; position: relative} .Dep01_Tit .Tit_b span{font-size:40px; height:40px; } } /**** 모바일 ****/ @media only all and (max-width:960px) { .Dep01_Tit{ width:100% ;float:left; position: relative; z-index: 999999; padding: 30px 20px;} .Dep01_Tit .Tit_b{ width:100%; color:#333; letter-spacing:-1px; text-align:left; height: 30px; overflow: hidden; margin-bottom: 0px; position: relative} .Dep01_Tit .Tit_b span{ width:100%; color:#333; letter-spacing:-1px; text-align:left; font-family: 'Myriad Pro', sans-serif; font-weight:700; font-size:26px; line-height: 120%; letter-spacing: -1px; -webkit-animation-name: Tit_b_ani;-webkit-animation-duration: 1s; animation-name: Tit_b_ani;animation-duration: 1s; position: absolute; left: 0px; ; text-transform:uppercase;} .Dep01_Tit .Tit_s{ width:100%; font-size:var(--f-13); font-weight:400; height: 20px; overflow: hidden;position: relative} .Dep01_Tit .Tit_s span{ width:100%; color:#333; font-size:var(--f-13); letter-spacing:-1px; text-align:left; line-height:20px;; -webkit-animation: Tit_s_ani 0.5s forwards; /* Safari 4.0 - 8.0 */ animation: Tit_s_ani 0.5s forwards; animation-delay:0.5s; position: absolute; left: 0px; top: 20px} } /**** 모바일2 ****/ @media only all and (max-width:400px) { } /* 구분 //end -----------------------------------*/ .img_title0101{ background-image: url( "../../_images/layout/topbg0101.jpg") ; background-size: cover } .img_title0200{ background-image: url( "../../_images/layout/topbg0101.jpg") ; background-size: cover } .img_title0201{ background-image: url( "../../_images/layout/topbg0201.jpg") ; background-size: cover } .img_title0301{ background-image: url( "../../_images/layout/topbg0101.jpg") ; background-size: cover } .img_title0401{ background-image: url( "../../_images/layout/topbg0101.jpg") ; background-size: cover } .img_title0501{ background-image: url( "../../_images/layout/topbg0101.jpg") ; background-size: cover } .img_title0601{ background-image: url( "../../_images/layout/topbg0101.jpg") ; background-size: cover } .img_title0701{ background-image: url( "../../_images/layout/topbg0101.jpg") ; background-size: cover } /* 구분 start -----------------------------------*/ /**** pc ****/ @media only all and (min-width:768px) { .subbgimg{width: 2500px; min-height:487px;position: absolute; z-index: 0; margin-left: -1250px; top: 0px; left: 50%; z-index: 0; -webkit-animation: example 4s forwards; animation: example 4s forwards; } .subbgimg img{width: 100%} .subbgimg2{width: 2500px;min-height:200px;position: absolute; z-index: 0; margin-left: -1250px; left: 50%; z-index: 0; -webkit-animation: example 4s forwards; animation: example 4s forwards; } .subbgimg2 img{width: 100%} .subbgimg3{width: 2500px;min-height:300px;position: absolute; z-index: 0; margin-left: -1250px; left: 50%; z-index: 0; -webkit-animation: example 4s forwards; animation: example 4s forwards; } .subbgimg3 img{width: 100%} } /**** pc2 ****/ @media all and (max-width:1500px) and (min-width:768px) { .subbgimg{ width:1500px;position: relative;-webkit-animation-name: example;-webkit-animation-duration: 2s; animation-name: example;animation-duration: 2s; position: absolute; z-index: 0; margin-left: -750px; left: 50%; z-index: 0;} .subbgimg img{ } .subbgimg2{ width:1500px;position: relative;-webkit-animation-name: example2;-webkit-animation-duration: 2s; animation-name: example2;animation-duration: 2s; position: absolute; z-index: 0; z-index: 0;} .subbgimg2 img{} .subbgimg3{ width:1500px;position: relative;-webkit-animation-name: example;-webkit-animation-duration: 2s; animation-name: example;animation-duration: 2s; position: absolute; z-index: 0; margin-left: -750px; left: 50%; z-index: 0;} .subbgimg3 img{ } } /**** 모바일 ****/ @media only all and (max-width:767px) { .subbgimg{ width:1200px;position: relative; -webkit-animation: example 2s forwards; /* Safari 4.0 - 8.0 */ animation: example 2s forwards;animation-duration: 2s; position: absolute; z-index: 0; margin-left: -500px; left: 50%; top: 0px; z-index: 0;} .subbgimg img{ width:1200px; } .subbgimg2{ width:110%;position: relative; -webkit-animation: example2 2s forwards; /* Safari 4.0 - 8.0 */ animation: example2 2s forwards;animation-duration: 2s; animation-duration: 2s; position: absolute; z-index: 0; z-index: 0;} .subbgimg2 img{ width:110%; } .subbgimg3{ width:130%;position: relative;-webkit-animation-name: example2;-webkit-animation-duration: 2s; animation-name: example2;animation-duration: 2s; position: absolute; z-index: 0; top: 0px; z-index: 0; } .subbgimg3 img{ width:130%;} .subbgimg3.hh{ width:130%;position: relative;-webkit-animation-name: example2;-webkit-animation-duration: 2s; animation-name: example2;animation-duration: 2s; position: absolute; z-index: 0; top: 0px; z-index: 0; } .subbgimg3.hh img{ height:200px;} } /**** 모바일2 ****/ @media only all and (max-width:400px) { } /* 구분 //end -----------------------------------*/ /* Safari 4.0 - 8.0 */ @-webkit-keyframes example { 0% { position: absolute; top: 0px;-webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } 100% {position: absolute; top: 0px;-webkit-transform: scale(1); transform: scale(1);} } /* Standard syntax */ @keyframes example { 0% { position: absolute;top: 0px; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } 100% {position: absolute; top: 0px; -webkit-transform: scale(1); transform: scale(1);} } /* Safari 4.0 - 8.0 */ @-webkit-keyframes example2 { 0% { position: absolute; -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } 100% {position: absolute; -webkit-transform: scale(1); transform: scale(1);} } /* Standard syntax */ @keyframes example2 { 0% { position: absolute; -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } 100% {position: absolute; -webkit-transform: scale(1); transform: scale(1);} } /* 구분 start -----------------------------------*/ /**** pc ****/ @media only all and (min-width:768px) { .subbgimg .Inner{width:100%; float: left; height:100%; display: flex; justify-content: center; align-items: center; } .sub_top_tx {width:100%; float: left; z-index: 99; position: relative; margin-top: 0px} .sub_top_tx.ac {width:100%; float: left; z-index: 99; position: relative; margin-top: -200px} .sub_top_tx .Tx1{ width:100%; float: left; font-size: 30PX; font-family: 'Myriad Pro', sans-serif; font-weight:700; line-height: 100%; margin-bottom: 15px; color: #fff; letter-spacing: -1px; text-transform:uppercase;} .sub_top_tx .Tx1 em{color:var(--div-color1); font-family: 'Myriad Pro', sans-serif; font-size: 50PX; letter-spacing: -1px; text-transform:uppercase;} .sub_top_tx .Tx2{ width:100%; float: left; font-size: 18PX; font-family: 'NanumSquareAcr'; line-height: 150%; color: #fff} .sub_top_tx .btnbox{ width:100%; float: left;display: flex; grid-gap: 10px; cursor: pointer; margin-top: 15px} .sub_top_tx .btnbox .btn1{ width:auto; float: left; padding: 15px 60px 15px 30px; border-radius: 4px; border: 1px solid #333; color: #fff; font-size: 16px; position: relative; background-color: #333} .sub_top_tx .btnbox .btn1:before{content: "\e99a"; font-family: unicons-line; color: #fff; font-size: 30px; position: absolute; right: 20px; top: 13px;} .sub_top_tx .btnbox .btn2 a{ width:auto; float: left; padding: 15px 60px 15px 30px; border-radius:4px; border: 1px solid var(--div-color1); color: #fff; font-size: 16px; position: relative; background-color: var(--div-color1)} .sub_top_tx .btnbox .btn2 a:before{content: "\e99a"; font-family: unicons-line; color: #fff; font-size: 25px; position: absolute; right: 20px; top: 13px;} .sub_top_tx .btnbox .btn3 a{ width:auto; float: left; padding: 15px 60px 15px 30px; border-radius:4px; border: 1px solid rgba(51,51,51,0.79); color: #fff; font-size: 16px; position: relative; background-color: rgba(51,51,51,0.79)} .sub_top_tx .btnbox .btn3 a:before{content: "\e99a"; font-family: unicons-line; color: #fff; font-size: 25px; position: absolute; right: 20px; top: 13px;} .sub_top_tx .btnbox .btn3.on a{ width:auto; float: left; padding: 15px 60px 15px 30px; border-radius:4px; border: 1px solid var(--div-color1); color: #fff; font-size: 16px; position: relative; background-color: var(--div-color1)} .sub_top_tx .btnbox .btn3.on a:before{content: "\e99a"; font-family: unicons-line; color: #fff; font-size: 25px; position: absolute; right: 20px; top: 13px;} } /**** pc2 ****/ @media all and (max-width:1280px) and (min-width:768px) { .sub_top_tx .Tx1{ width:100%; float: left; font-size: 30PX; font-family: 'Myriad Pro', sans-serif; font-weight:700; line-height: 100%; margin-bottom: 5px; color: #fff; letter-spacing: -1px; text-transform:uppercase;} .sub_top_tx .Tx1 em{color:var(--div-color1); font-family: 'Myriad Pro', sans-serif; letter-spacing: -1px; text-transform:uppercase;} .sub_top_tx .Tx2{ width:100%; float: left; font-size: 15PX; font-family: 'NanumSquareAcr'; line-height: 150%; color: #fff} .sub_top_tx .btnbox .btn2 a{ width:auto; float: left; padding: 10px 60px 10px 30px; border-radius:4px; border: 1px solid var(--div-color1); color: #fff; font-size: 15px; position: relative; background-color: var(--div-color1)} .sub_top_tx .btnbox .btn2 a:before{content: "\eb36"; font-family: unicons-line; color: #fff; font-size: 25px; position: absolute; right: 10px; top: 7px;} } /**** 모바일 ****/ @media only all and (max-width:767px) { .subbgimg .Inner{width:100%; float: left; height:100%; display: flex; justify-content: center; align-items: center;} .sub_top_tx {width:100%; float: left; z-index: 99; position: relative; margin-top:0px} .sub_top_tx.ac {width:100%; float: left; z-index: 99; position: relative; margin-top: 50px} .sub_top_tx .Tx1{ width:100%; float: left; font-size: 22PX; font-family: 'Myriad Pro', sans-serif; font-weight:700; line-height: 100%; margin-bottom: 5px; color: #fff; letter-spacing: -1px; text-transform:uppercase;} .sub_top_tx .Tx1 em{color:var(--div-color1); font-family: 'Myriad Pro', sans-serif; letter-spacing: -1px; text-transform:uppercase;} .sub_top_tx .Tx2{ width:100%; float: left; font-size: 12PX; font-family: 'NanumSquareAcr'; line-height: 130%; margin-bottom: 10px; color: #fff} .sub_top_tx .btnbox{ width:100%; float: left;display: flex; grid-gap: 10px; cursor: pointer; margin-top: 15px} .sub_top_tx .btnbox .btn2 a{ width:auto; float: left; padding: 10px 30px 10px 10px; border-radius:4px; border: 1px solid var(--div-color1); color: #fff; font-size: 14px; position: relative; background-color: var(--div-color1)} .sub_top_tx .btnbox .btn2 a:before{content: "\eb36"; font-family: unicons-line; color: #fff; font-size: 18px; position: absolute; right: 10px; top: 8px;} .sub_top_tx .btnbox .btn3 a{ width:auto; float: left; padding: 10px 30px 10px 10px; border-radius:4px; border: 1px solid rgba(51,51,51,0.79); color: #fff; font-size: 14px; position: relative; background-color: rgba(51,51,51,0.79)} .sub_top_tx .btnbox .btn3 a:before{content: "\e99a"; font-family: unicons-line; color: #fff; font-size: 20px; position: absolute; right: 5px; top: 9px;} .sub_top_tx .btnbox .btn3.on a{ width:auto; float: left; padding: 10px 30px 10px 10px; border-radius:4px; border: 1px solid var(--div-color1); color: #fff; font-size: 14px; position: relative; background-color: var(--div-color1)} .sub_top_tx .btnbox .btn3.on a:before{content: "\e99a"; font-family: unicons-line; color: #fff; font-size: 20px; position: absolute; right: 5px; top: 9px;} } /**** 모바일2 ****/ @media only all and (max-width:400px) { } /* 구분 //end -----------------------------------*/ /* Standard syntax */ @keyframes Tit_b_ani { 0% { position: absolute; top: 52px; } 100% {position: absolute; top: 0px;} } /* Standard syntax */ @keyframes Tit_s_ani { 0% { position: absolute; top: 20px; } 100% {position: absolute; top: 0px;} } /* 구분 start -----------------------------------*/ /**** pc ****/ @media only all and (min-width:768px) { .stitle_box{ width:100%;float:left; margin-top:85px; padding-bottom:0px; box-sizing:border-box; position: relative ; height: 45px; border-bottom: solid 1px #ccc; margin-bottom:50px } .stitle_box .e_text{ width:100%; font-size:14px;text-align: left; color:#666; float:left; margin-bottom:0px; line-height:14px; font-weight:400; text-transform:uppercase; ;font-family:'Noto Sans Korean', 'Noto Sans KR';} .stitle_box .k_text{ width:auto; font-size:38px;text-align: left; color:#000; float:left; letter-spacing:-1px; font-weight:700;font-family: 'NanumSquare', sans-serif; transform: skew(-0.201deg);line-height:45px; padding-right:15px; height: 45px; border-bottom: solid 1px #fff} .stitle_box .s_text{ width:auto; font-size:18px; text-align: left; color:#999; float:left; ; font-weight:700;font-family: 'NanumSquare', sans-serif; transform: skew(-0.201deg);line-height:45px; padding-right:60px; height: 45px; border-bottom: solid 1px #fff; padding-top:12px ;text-transform:uppercase;} } /**** pc2 ****/ @media all and (max-width:1280px) and (min-width:768px) { } /**** 모바일 ****/ @media only all and (max-width:767px) { .stitle_box{ width:100%; float:left; margin-top:40px; padding-bottom:20px; box-sizing:border-box; position: relative; border-bottom: 1px solid #ccc; margin-bottom:20px } .stitle_box .e_text{ width:100%; font-size:14px; color:#666; float:left; margin-bottom:0px; line-height:14px; font-weight:400; text-transform:uppercase; ;font-family:'Noto Sans Korean', 'Noto Sans KR';} .stitle_box .k_text{ width:100%; font-size:24px; color:#333; float:left; letter-spacing:-1px; margin-bottom:10px; font-weight:700;;font-family:'Noto Sans Korean', 'Noto Sans KR'; text-align: center} .stitle_box .s_text{ width:100%; font-size:14px; color:#666; float:left;word-wrap: break-word; word-break: keep-all; text-align: center } } /**** 모바일2 ****/ @media only all and (max-width:400px) { } /* 구분 //end -----------------------------------*/