@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
/* font-family: 'Pretendard', sans-serif; */

*{font-family: 'Pretendard', sans-serif;}

@media screen and (min-width:1201px){
/* common */
p{color: #fff; line-height: 1.6em; font-size: 1.25rem;}
.section_title{display: block; font-size: 1.5rem; color: #008CFF; margin-bottom: 45px; font-weight: 700;}
.con_title{font-size: 2.5rem; line-height: 1.5em; color: #fff;  word-break: keep-all;}
.sub_title{display: block; font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 45px;}

.more_btn{display: block; width: 206px; height: 52px; border: 1px solid #fff; border-radius: 26px; color: #fff; font-size: 1.125rem; line-height: 52px; text-align: center; font-weight: 500; transition-duration: 0.2s;}
.more_btn:hover{background-color: #fff; color: #000;}
.more_btn2{font-size: 1.125rem; font-weight: 700; color: #fff; display: flex; align-items: center;}
.more_btn2 span{margin-left: 8px; height: 100%;}
.more_btn2 span img{height: 100%;}
/* 52 - 40 - 32 - 24 - 20 */


/* header */
#header{position: fixed; width: 100%; height: 90px; z-index: 999; background-color: none; transition-duration: 0.2s;}
#header.change{background-color: rgba(0, 0, 0, 0.8);}
#header.mob_on{background: none !important;}
#header.mob_on .gnb{display: none;}

#header .gnb_bg{width: 100%; height: 380px; background-color: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(6px); position: absolute; top: 90px; left: 0; display: none;}
#header .header_wrap{position: relative; width: 95%; margin: 0 auto;}
#header .header_wrap .top_logo{position: absolute; top: 44px; left: 0;}

/* header - gnb */
#header .gnb{position: absolute; left: 280px; top: 26px;}
#header .gnb>ul{display: flex; align-items: center; height: 64px;}
#header .gnb>ul>li{position: relative; padding-right: 72px;}
#header .gnb>ul>li>a{display: block; font-size: 18px; color: #fff; font-weight: 700; box-sizing: border-box; line-height: 64px;}
#header .gnb .gnb_sub{position: absolute; left: 0; width: 120%; display: none;}
#header .gnb .gnb_sub>li>a{display: block; font-size: 16px; color: #757575; line-height: 45px;}
#header .gnb .gnb_sub>li:first-child>a{padding-top: 12px;}
#header .gnb .gnb_sub>li>a.sub_link{color: #fff;}
#header a.sub_link:hover{text-decoration: underline; text-underline-offset: 6px;}
#header .gnb .gnb_sub_wide{position: absolute; left: 0; width: 650px; gap: 0 12%; display: none;} /* flex */
#header .gnb .gnb_sub_wide .gnb_sub_sort{display: block; font-size: 14px; color: #aeaeae; margin-bottom: 15px; padding-top: 23px;}
#header .gnb .gnb_sub_wide .gnb_sub2>li>a{display: block; font-size: 16px; color: #757575; padding-bottom: 30px;}
#header .gnb .gnb_sub_wide .gnb_sub2>li>a.sub_link{color: #fff;}

.gnb_mob{position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.8); height: 100vh; z-index: 998; padding: 110px 2.5%; box-sizing: border-box; display: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(6px);}
.gnb_mob>ul{width: 95%; max-width: 1200px; position: absolute; top: calc(50% + 10px); left: 50%; transform: translate(-50%, -50%);}
.gnb_mob>ul>li{display: flex; position: relative; height: 60px; border-bottom: 1px solid #242424; padding-top: 30px;}
.gnb_mob>ul>li:nth-child(2){height: 280px;}
.gnb_mob>ul>li>a{font-size: 28px; color: #fff; font-weight: 700; display: flex;}

.gnb_mob .gnb_sub{display: flex; flex-wrap: wrap; position: absolute; top: 30px; left: 25%; gap: 80px;}
.gnb_mob .gnb_sub li>a{font-size: 20px; color: #fff; line-height: 32px; font-weight: 700;}
.gnb_mob .gnb_sub_wide{display: flex; position: absolute; top: 30px; left: 25%; gap: 60px;}
.gnb_mob .gnb_sub_sort{display: block; font-size: 20px; color: #fff; cursor: pointer; font-weight: 700; margin-bottom: 24px;}
.gnb_mob .gnb_sub2 li>a{font-size: 16px; color: #fff; line-height: 32px;}

/* header - util&btn */
#header .util{display: flex; align-items: center; position: absolute; right: 56px; top: 44px;}
#header .util>a{color: #fff; font-size: 14px; display: flex; margin-left: 32px;}
#header .util button{display: flex; color: #fff; font-size: 14px;}
#header .util button>span{margin-left: 12px;}
#header .util .ln{position: relative; margin-left: 32px;}
#header .util .ln>div{position: absolute; left: 0; display: none;}
#header .util .ln>div a{display: block; color: #fff; font-size: 14px; margin-top: 12px;}
#header a.contact_btn{padding: 4px 12px; background-color: #fff; border-radius: 16px; color: #000; font-weight: 700;}
#header .gnb_btn{position: absolute; right: 0; top: 40px;}


/* footer */
#footer{width: 100%; background-color: #000; padding: 168px 0 92px 0;}
#footer .footer_wrap{padding: 0 8%;}
#footer .footer_top{display: flex; justify-content: space-between;}
#footer .footer_top .footer_title{font-size: 52px; color: #fff; margin-bottom: 12px;}
#footer .footer_top .sns_list{display: flex; margin-top: 48px; align-items: center;}
#footer .footer_top .sns_list li{margin-right: 18px;}
#footer .footer_top .footer_right{display: flex;}
#footer .footer_top .footer_right img{margin-left: 220px;}
#footer .footer_top address{display: flex; margin-top: 48px; color: #aeaeae; font-size: 20px; font-style: normal;}
#footer .footer_top span{margin-right: 10px;}
#footer .footer_top .tel{display: flex; margin-top: 16px;}
#footer .footer_top .tel p{display: flex; color: #aeaeae; font-size: 20px; align-items: center;}
#footer .footer_top .tel p:nth-child(2){margin-left: 36px;}

#footer .footer_bottom{margin-top: 150px;}
#footer .footer_bottom p{font-size: 14px; line-height: 2em;}
#footer .footer_bottom p.copy{color: #757575; margin-top: 45px;}
}






@media screen and (min-width:901px) and (max-width:1200px){
/* common */
p{color: #fff; line-height: 1.6em; font-size: 16px;}
.section_title{display: block; font-size: 20px; color: #008CFF; margin-bottom: 45px; font-weight: 700;}
.con_title{font-size: 32px; line-height: 1.5em; color: #fff;  word-break: keep-all;}
.sub_title{display: block; font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 45px;}

.more_btn{display: block; width: 206px; height: 52px; border: 1px solid #fff; border-radius: 26px; color: #fff; font-size: 1.125rem; line-height: 52px; text-align: center; font-weight: 500;}
.more_btn2{font-size: 1.125rem; font-weight: 700; color: #fff; display: flex; align-items: center;}
.more_btn2 span{margin-left: 8px; height: 100%;}
.more_btn2 span img{height: 100%;}
/* 52 - 40 - 32 - 24 - 20 */


/* header */
#header{position: fixed; width: 100%; height: 90px; z-index: 999; background-color: rgba(0, 0, 0, 0.9);}
#header .gnb_bg{width: 100%; height: 400px; background-color: rgba(0, 0, 0, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(6px); position: absolute; top: 90px; left: 0; display: none;}
#header .header_wrap{position: relative; width: 95%; margin: 0 auto;}
#header .header_wrap .top_logo{position: absolute; top: 44px; left: 0;}

/* header - gnb */
#header .gnb{display: none;}

.gnb_mob{position: fixed; top: 90px; left: 0; width: 100%; background-color: #000; height: calc(100vh - 60px); z-index: 999; padding: 16px 4%; box-sizing: border-box; display: none;}
.gnb_mob>ul>li:first-child~li{margin-top: 32px;}
.gnb_mob>ul>li>a{font-size: 28px; color: #fff; font-weight: 700; display: flex; align-items: center;}
.gnb_mob>ul>li>a::after{content: ''; display: block; width: 24px; height: 24px; margin-left: 12px; background-image: url(../img/icon_plus_circle_white.svg); background-size: contain; background-position: center;}
.gnb_mob>ul>li:nth-child(3)>a::after{content: none;}

.gnb_mob .gnb_sub{margin-top: 8px; display: none;}
.gnb_mob .gnb_sub li>a{font-size: 20px; color: #fff; line-height: 32px;}

.gnb_sub_wide{display: none;}
.gnb_mob .gnb_sub_sort{display: block; font-size: 20px; color: #fff; margin: 12px 0; cursor: pointer;}
.gnb_mob .gnb_sub2{display: none;}
.gnb_mob .gnb_sub2 li>a{font-size: 16px; color: #fff; line-height: 24px;}

/* header - util&btn */
#header .util{display: flex; align-items: center; position: absolute; right: 56px; top: 44px;}
#header .util>a{color: #fff; font-size: 14px; display: flex; margin-left: 32px;}
#header .util button{display: flex; color: #fff; font-size: 14px;}
#header .util button>span{margin-left: 12px;}
#header .util .ln{position: relative; margin-left: 32px;}
#header .util .ln>div{position: absolute; left: 0; display: none;}
#header .util .ln>div a{display: block; color: #fff; font-size: 14px; margin-top: 12px;}
#header a.contact_btn{padding: 4px 12px; background-color: #fff; border-radius: 16px; color: #000; font-weight: 700;}
#header .gnb_btn{position: absolute; right: 0; top: 40px;}


/* footer */
#footer{width: 100%; background-color: #000; padding: 168px 0 92px 0;}
#footer .footer_wrap{padding: 0 8%;}
#footer .footer_top .footer_title{font-size: 40px; color: #fff; margin-bottom: 12px;}
#footer .footer_top .sns_list{display: flex; margin-top: 24px; align-items: center;}
#footer .footer_top .sns_list li{margin-right: 18px;}
#footer .footer_top .footer_right{display: flex; margin-top: 52px;}
#footer .footer_top .footer_right img{margin-left: 167px; width: 80px;}
#footer .footer_top address{display: flex; margin-top: 26px; color: #aeaeae; font-size: 16px; font-style: normal;}
#footer .footer_top span{margin-right: 10px;}
#footer .footer_top .tel{display: flex; margin-top: 16px;}
#footer .footer_top .tel p{display: flex; color: #aeaeae; font-size: 16px; align-items: center;}
#footer .footer_top .tel p:nth-child(2){margin-left: 36px;}

#footer .footer_bottom{margin-top: 70px;}
#footer .footer_bottom p{font-size: 14px; line-height: 2em;}
#footer .footer_bottom p.copy{color: #757575; margin-top: 45px;}
}






@media screen and (min-width:601px) and (max-width:900px) {
/* common */
p{color: #fff; line-height: 1.6em; font-size: 16px;}
.section_title{display: block; font-size: 16px; color: #008CFF; margin-bottom: 20px; font-weight: 700;}
.con_title{font-size: 32px; line-height: 1.5em; color: #fff;  word-break: keep-all;}
.sub_title{display: block; font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 24px;}

.more_btn{display: block; width: 160px; height: 40px; border: 1px solid #fff; border-radius: 26px; color: #fff; font-size: 16px; line-height: 40px; text-align: center; font-weight: 500;}
.more_btn2{font-size: 16px; font-weight: 700; color: #fff; display: flex; align-items: center;}
.more_btn2 span{margin-left: 8px; height: 100%;}
.more_btn2 span img{height: 100%;}
/* 52 - 40 - 32 - 24 - 20 */


/* header */
#header{position: fixed; width: 100%; height: 60px; z-index: 999; background-color: rgba(0, 0, 0, 1); border-bottom: 1px solid #242424;}
#header .gnb_bg{width: 100%; height: 400px; background-color: rgba(0, 0, 0, 1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(6px); position: absolute; top: 110px; left: 0; display: none;}
#header .header_wrap{position: relative; width: 95%; margin: 0 auto;}
#header .header_wrap .top_logo{position: absolute; top: 19px; left: 0;}

/* header - gnb */
#header .gnb{display: none;}

.gnb_mob{position: fixed; top: 60px; left: 0; width: 100%; background-color: #000; height: calc(100vh - 60px); z-index: 999; padding: 16px 4%; box-sizing: border-box; display: none;}
.gnb_mob>ul>li:first-child~li{margin-top: 32px;}
.gnb_mob>ul>li>a{font-size: 28px; color: #fff; font-weight: 700; display: flex; align-items: center;}
.gnb_mob>ul>li>a::after{content: ''; display: block; width: 24px; height: 24px; margin-left: 12px; background-image: url(../img/icon_plus_circle_white.svg); background-size: contain; background-position: center;}
.gnb_mob>ul>li:nth-child(3)>a::after{content: none;}

.gnb_mob .gnb_sub{margin-top: 8px; display: none;}
.gnb_mob .gnb_sub li>a{font-size: 20px; color: #fff; line-height: 32px;}

.gnb_sub_wide{display: none;}
.gnb_mob .gnb_sub_sort{display: block; font-size: 20px; color: #fff; margin: 12px 0; cursor: pointer;}
.gnb_mob .gnb_sub2{display: none;}
.gnb_mob .gnb_sub2 li>a{font-size: 16px; color: #fff; line-height: 24px;}

/* header - util&btn */
#header .util{display: none;}
#header .gnb_btn{position: absolute; right: 0; top: 14px;}


/* footer */
#footer{width: 100%; background-color: #000; padding: 52px 0 35px 0; border-top: 1px solid #242424;}
#footer .footer_wrap{padding: 0 4%;}
#footer .footer_top .footer_title{font-size: 24px; color: #fff; margin-bottom: 4px;}
#footer .footer_top .sns_list{display: flex; margin-top: 24px; align-items: center;}
#footer .footer_top .sns_list li{margin-right: 18px;}
#footer .footer_top .footer_right{display: flex; margin-top: 36px;}
#footer .footer_top .footer_right img{margin-left: 167px; width: 55px;}
#footer .footer_top address{display: flex; margin-top: 26px; color: #aeaeae; font-size: 16px; font-style: normal;}
#footer .footer_top span{margin-right: 10px;}
#footer .footer_top .tel{display: flex; margin-top: 10px;}
#footer .footer_top .tel p{display: flex; color: #aeaeae; font-size: 16px; align-items: center;}
#footer .footer_top .tel p:nth-child(2){margin-left: 36px;}

#footer .footer_bottom{margin-top: 70px;}
#footer .footer_bottom p{font-size: 11px; line-height: 2em;}
#footer .footer_bottom p.copy{color: #757575; margin-top: 45px;}
}






@media screen and (max-width:600px) {
    /* common */
p{color: #fff; line-height: 1.6em; font-size: 16px;}
.section_title{display: block; font-size: 16px; color: #008CFF; margin-bottom: 20px; font-weight: 700;}
.con_title{font-size: 20px; line-height: 1.5em; color: #fff;  word-break: keep-all;}
.sub_title{display: block; font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 24px;}

.more_btn{display: block; width: 160px; height: 40px; border: 1px solid #fff; border-radius: 26px; color: #fff; font-size: 16px; line-height: 40px; text-align: center; font-weight: 500;}
.more_btn2{font-size: 16px; font-weight: 700; color: #fff; display: flex; align-items: center;}
.more_btn2 span{margin-left: 8px; height: 100%;}
.more_btn2 span img{height: 100%;}
/* 52 - 40 - 32 - 24 - 20 */


/* header */
#header{position: fixed; width: 100%; height: 60px; z-index: 999; background-color: rgba(0, 0, 0, 1); border-bottom: 1px solid #242424;}
#header .gnb_bg{width: 100%; height: 400px; background-color: rgba(0, 0, 0, 1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(6px); position: absolute; top: 110px; left: 0; display: none;}
#header .header_wrap{position: relative; width: 92%; margin: 0 auto;}
#header .header_wrap .top_logo{position: absolute; top: 19px; left: 0;}

/* header - gnb */
#header .gnb{display: none;}

.gnb_mob{position: fixed; top: 60px; left: 0; width: 100%; background-color: #000; height: calc(100vh - 60px); z-index: 999; padding: 16px 4%; box-sizing: border-box; display: none;}
.gnb_mob>ul>li:first-child~li{margin-top: 32px;}
.gnb_mob>ul>li>a{font-size: 28px; color: #fff; font-weight: 700; display: flex; align-items: center;}
.gnb_mob>ul>li>a::after{content: ''; display: block; width: 24px; height: 24px; margin-left: 12px; background-image: url(../img/icon_plus_circle_white.svg); background-size: contain; background-position: center;}
.gnb_mob>ul>li:nth-child(3)>a::after{content: none;}

.gnb_mob .gnb_sub{margin-top: 8px; display: none;}
.gnb_mob .gnb_sub li>a{font-size: 20px; color: #fff; line-height: 32px;}

.gnb_sub_wide{display: none;}
.gnb_mob .gnb_sub_sort{display: block; font-size: 20px; color: #fff; margin: 12px 0; cursor: pointer;}
.gnb_mob .gnb_sub2{display: none;}
.gnb_mob .gnb_sub2 li>a{font-size: 16px; color: #fff; line-height: 32px;}

/* header - util&btn */
#header .util{display: none;}
#header .gnb_btn{position: absolute; right: 0; top: 14px;}
#header .gnb_btn img{width: 100%;}


/* footer */
#footer{width: 100%; background-color: #000; padding: 52px 0 35px 0; border-top: 1px solid #242424;}
#footer .footer_wrap{padding: 0 4%;}
#footer .footer_top .footer_title{font-size: 24px; color: #fff; margin-bottom: 4px;}
#footer .footer_top p{font-size: 12px;}
#footer .footer_top .sns_list{display: flex; margin-top: 24px; align-items: center;}
#footer .footer_top .sns_list li{margin-right: 10px;}
#footer .footer_top .footer_right{display: flex; margin-top: 36px;}
#footer .footer_top .footer_right img{width: 51px; margin-left: 55px;}
#footer .footer_top address{display: flex; margin-top: 26px; color: #aeaeae; font-size: 11px; font-style: normal; align-items: center;}
#footer .footer_top span{margin-right: 4px;}
#footer .footer_top span img{width: 80%;}
#footer .footer_top .tel{display: flex; margin-top: 10px;}
#footer .footer_top .tel p{display: flex; color: #aeaeae; font-size: 11px; align-items: center;}
#footer .footer_top .tel p:nth-child(2){margin-left: 16px;}

#footer .footer_bottom{margin-top: 70px;}
#footer .footer_bottom p{font-size: 9px; line-height: 2em;}
#footer .footer_bottom p.copy{color: #757575; margin-top: 45px;}
}