@charset 'utf-8';
:root {
    --color-111: #111;
    --color-222: #222;
    --color-333: #333;
    --color-888: #888;
    --color-ccc: #ccc;
    --color-fff: #fff;
    --point-color: #E42921;
    --main-padding:clamp(80px,8.72vw,150px);
    --font72: 72px;
    --font32: clamp(24px,1.76vw,32px);
    --font20: clamp(18px,1.1vw,20px);
    --font18: 18px;
}

@media screen and (max-width:1720px) {
    :root{
        --font72: clamp(56px,4.19vw,72px);
        --font32: clamp(22px,2.34vw,24px);
        --font20: clamp(16px,1.76vw,18px);
        --font18: clamp(15px,1.05vw,18px);
    }
}
@media screen and (max-width:1024px) {
    :root{
        --main-padding:clamp(66px,7.81vw,80px);
        --font72: clamp(40px,5.47vw,56px);
    }
}

/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; font-size:15px;	line-height: 140%; word-break:break-all; }
.privacy h2 { font-size:18px; font-weight:bold; color:#000; text-align: left; margin:50px 0 30px; }
.privacy h2:first-child { margin-top: 0; }
.privacy > p { margin:15px 0; }
.privacy > p+dl { margin-top: 30px; }
.privacy > dl { padding-bottom:20px;}
.privacy > dl:last-of-type{padding-bottom: 0;}
.privacy > dl > dt{ font-size:15px;color:var(--point-color);font-weight:700;padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify; font-size:15px; line-height:140%;}
.privacy > dl > dd ul{ padding:10px; }
.privacy > dl > dd ul li{ line-height:120%; margin-top: 10px; }
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; line-height: 140%; }
.sTxt h3 { font-size:16px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin-top: 10px; }
.sTxt dt { margin-top: 10px; }
.sTxt dd { margin:0 8px;}

input[type="submit"],input[type="button"], input[type="file"],
input[type="text"], button { appearance: none; -moz-appearance: none; 
-webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; 
-moz-border-radius: 0; }
input[type="checkbox"]{ padding: 0 !important;}

/* select icon */
select::-ms-expand { display: none; }
select { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none;
    background: url("/img/common/icon-select.svg") no-repeat 100% 50%;
}


:root{
	/* 페이지버튼 */
	--pagingFontStyle:  "IBM Plex Sans", sans-serif;
	--pagingNumC : #111;
	--aSize : clamp(35px,4.39vw,45px );
	--pagingMarTop: clamp(60px, 11.72vw, 120px);
}

/* 기본 */
.paging{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.paging .arr{display:flex;}
.paging a{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.paging ul{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 5px;}
.paging .arr a:not(:last-child),.paging ul li:not(:last-child){margin-right:5px;}

/* 커스텀 */
.paging{margin-top: var(--pagingMarTop);}
.paging a{width:var(--aSize); height:var(--aSize); color: var(--pagingNumC); font-family: var(--pagingFontStyle); line-height: var(--aSize); font-weight: 600; font-size:clamp(14px,1.56vw,16px); border:2px solid transparent; border-radius:50%;}
.paging ul li.on a {
    color:var(--point-color);
    border-color: var(--point-color);
}
.paging .arr a{border:none;}

@media (max-width:600px) {
	.paging a{border-width: 1px;}
}

/* common */
*{box-sizing: border-box; line-height: 1.3; letter-spacing: -0.02em; word-break: keep-all;}
.ir{position: absolute; clip: rect(0,0,0,0); width: 1px; height: 1px;overflow: hidden;}
.f-ibm{font-family: "IBM Plex Sans", sans-serif;}
.f-sg{font-family: "Special Gothic", sans-serif;}
.flex-box{display:flex;}
.flex-box.ac{align-items: center;}
.flex-box.jc{justify-content: center;}
.w1720{position: relative; width: 100%; max-width: 1720px; margin: 0 auto;}
.w1600{position: relative; width: 100%; max-width: 1600px; margin: 0 auto;}
.w1000{position: relative; width: 100%; max-width: 1000px; margin: 0 auto;}
.br768{display: none;}
/* common btn */
.common-btn{position: relative; display: block; width: 60px; height: 60px;  border-radius:50%}
.common-btn svg{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: auto; height: auto; z-index: 10;}
.common-btn::after{content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.4); width: 100%; height: 100%;  border-radius:50%; background-color: transparent; transition: 0.3s; pointer-events: none;}
.common-btn::before{content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(1); width: 100%; height: 100%; border:1px solid var(--point-color); border-radius:50%; transition: border-color 0.3s, border-width 0.3s, transform 0.3s; pointer-events: none;}
/* gray btn */
.common-btn.gray{border:1px solid #E5E5E5;}
.common-btn.gray::before{opacity: 0;}

/* header */
.header{position: fixed; width: 100%; height: 90px; top: 0; left: 0; padding: 0 42px 0 50px; display:flex; align-items: center; justify-content: space-between; color: var(--color-fff); transition: top 0.3s, background-color 0.3s; z-index: 9999;}
/* down */
.header.down{top: -90px;}
.header:has(.m-btn.on).down{top: 0 !important;}
.header .gnb{position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.header .gnb > ul{display:flex; align-items: center;}
.header .gnb > ul > li{position: relative;}
.header .gnb > ul > li > a{display: inline-block; vertical-align: top; padding: 0 44px; font-weight: 600; font-size: 18px; line-height: 90px;}
.header .gnb > ul > li > a > span{display: inline-block; vertical-align: middle; width: max-content; transition: 0.4s}
.header .gnb > ul > li > ul{display: none; position: absolute; top: 90px; left: 50%; width: 180px; padding: 17px 0; background: rgba(43, 43, 139, 0.7) url("/img/common/nav-bg.png") 50% 0 no-repeat; border-radius:10px; transform: translateX(-50%); box-shadow: inset 0 0 20px 20px rgba(255, 255, 255, 0.3); }
.header .gnb > ul > li > ul > li{margin-bottom: 1px;}
.header .gnb > ul > li > ul > li:last-of-type{margin-bottom: 0;}
.header .gnb > ul > li > ul > li > a{display: inline-block; vertical-align: top; width: 100%; padding: 7px 0; font-weight: 500; color: var(--color-fff); font-size: 17px; text-align: center; opacity: 0.7; transition: 0.3s;}
.header .gnb > ul > li > ul > li > a .all{display: none;}
.header .header-ui{display:flex; gap: 22px; align-items: center;}
.header .header-ui .lang{display:flex; gap:5px; align-items: center;}
.header .header-ui .lang figure img{transition: 0.3s;}
.header .header-ui ul{display: flex; gap:3px; align-items: center;}
.header .header-ui ul li{position: relative;}
.header .header-ui ul li::after{content:""; position: absolute; top: 50%; right: -4px; transform: translateY(-50%); width: 3px; height: 3px; background: var(--color-fff); border-radius:50%}
.header .header-ui ul li:last-of-type::after{display: none;}
.header .header-ui ul li a{font-weight: 700; padding: 5px;opacity: 0.3; transition: 0.2s; font-size: 17px;}
.header .header-ui ul li a.on{opacity: 1;}
.header .m-btn{position: relative; width: 41px; height: 40px; cursor: pointer; z-index: 10;}
.header .m-btn span{position: absolute; top: 50%; left: 50%; width: 25px; height: 2px; background: var(--color-fff); transform: translate(-50%,-50%); transition: 0.3s;}
.header .m-btn span::before{content:""; position: absolute; top: -8px; left: 0; width: 100%; height: 100%; background: var(--color-fff); transition: 0.3s;}
.header .m-btn span::after{content:""; position: absolute; top: 8px; left: 0; width: 100%; height: 100%; background: var(--color-fff); transition: 0.3s;}
.header .all-menu{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transition: 0.5s;}
.header .all-menu .snb{display:flex; align-items: center; justify-content: center; height: 100vh;} 
.header .all-menu .snb > ul{display:flex; width:100%; max-width: 1720px; min-height: 555px; text-align: center; margin: 0 auto; }
.header .all-menu .snb > ul > li{position: relative; width: 20%;}
.header .all-menu .snb > ul > li::after{content:''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: rgba(255, 255, 255, 0.1);}
.header .all-menu .snb > ul > li:last-of-type::after{display: none;}
.header .all-menu .snb > ul > li > a{pointer-events: none;}
.header .all-menu .snb > ul > li > a span{display: block; font-weight: 700; font-size: 26px; color: var(--color-fff); margin: 60px 0;}
.header .all-menu .snb > ul > li > ul > li{margin-bottom: 1px;}
.header .all-menu .snb > ul > li > ul > li:last-of-type{margin-bottom: 0;}
.header .all-menu .snb > ul > li > ul > li > a{display: block; padding: 7px 0; font-weight: 600; font-size: 19px; color: var(--color-fff); opacity: 0.3; transition: 0.3s;}
.header .all-menu .snb > ul > li > ul > li > a .all{display: inline;}
.header .all-menu p{position: absolute; bottom: 30px; left: 50%; width: 100%; max-width: 1720px; font-size: 17px; color: var(--color-888); font-weight: 500; transform: translateX(-50%);}

/* bg */
.header.bg{background-color: var(--color-fff); color: var(--color-111);}
.header.bg .header-ui .lang figure img{filter: brightness(0) saturate(100%)}
.header.bg .gnb > ul > li > ul{top: 84px;}
.header.bg .header-ui ul li::after{background-color: var(--color-111);}
.header.bg .m-btn span,
.header.bg .m-btn span::before,
.header.bg .m-btn span::after{background: var(--color-111);}
.header.bg .m-btn.on span::before,
.header.bg .m-btn.on span::after{background: var(--color-fff);}
/* on */
.header .m-btn.on span{width: 18px; background: transparent;}
.header .m-btn.on span::before{top: 0; transform: rotate(45deg);}
.header .m-btn.on span::after{top: 0; transform: rotate(-45deg);}
.header .all-menu.on{opacity: 1; visibility: visible;}

.footer{position: relative; padding: 80px 0; background: #111111; color: var(--color-fff);}
.footer .top-box{display:flex; justify-content: space-between;}
.footer .top-box ul{display:flex; gap:40px}
.footer .top-box ul li a{font-weight: 600; font-size: 18px;}
.footer .footer-info-box{display: flex; justify-content: space-between; margin-top: 48px;}
.footer .footer-info-box .sns-box{order:2}
.footer .footer-info-box .sns-box ul{display: flex; gap:27px}
.footer .info-box{display:flex; gap:80px; align-items: center; font-size: 18px;}
.footer .info-box .box{margin-top: 32px; font-size: 18px;}
.footer .info-box .box address{margin: 15px 0; font-weight: 300; color: var(--color-ccc);}
.footer .info-box .box ul{display:flex; gap:10px 20px; align-items: center; flex-wrap:wrap;}
.footer .info-box .box ul li span{font-family: "IBM Plex Sans", sans-serif; font-weight: 500;}
.footer .info-box .box ul li span:last-of-type{font-weight: 300; color: var(--color-ccc); margin-left: 10px;}
.footer .copy{color: var(--color-ccc); font-weight: 300; font-size: 17px; margin-top: 20px;}
.footer .copy .f-sg{font-weight: 400;}
.footer .top-btn{position: absolute; bottom: 0; right: 0; cursor: pointer;}
.footer .top-btn svg g path{transition: 0.3s;}

@media (hover: hover){
    /* common */
    .common-btn:hover::before{border-color: transparent; border-width: 2px; transform: translate(-50%,-50%) scale(1.6);}
    .common-btn:hover::after{background-color: var(--point-color); transform: translate(-50%,-50%) scale(1);}
    .common-btn:has(rect):hover svg rect{fill:var(--color-fff)}
    .common-btn.gray:hover{border:1px solid transparent}
    .common-btn.gray:hover::before{opacity: 1;}
    /* header */
    .header .gnb > ul > li:hover > a > span{transform: translateY(10px);}
    .header .gnb > ul > li > ul > li > a:hover,
    .header .header-ui ul li a:hover,
    .header .all-menu .snb > ul > li > ul > li > a:hover{opacity: 1;}
    .header .m-btn:not(.on):hover span::before{top: -6px;}
    .header .m-btn:not(.on):hover span::after{top: 6px;}
    .header .m-btn.on:hover span{width: 24px;}
    /* footer */
    .footer .top-btn:hover svg g path{stroke: var(--color-fff);}
}

@media screen and (max-width:1740px) {
    .header .all-menu p,
    .w1720{padding: 0 clamp(16px,3.49vw,60px);}
    .header .all-menu .snb > ul{padding: 0 clamp(12px,3.49vw,60px);}

    /* footer */
    .footer .info-box{gap:10px clamp(40px,4.65vw,80px)}
    .footer .top-btn{right: clamp(16px,3.49vw,60px)}
}

@media screen and (max-width:1600px) {
    .w1600{padding: 0 clamp(16px,3.75vw,60px);}
    /* header */
    .header{height: clamp(70px, 5.63vw,90px); padding: 0 clamp(32px, 2.63vw,42px) 0 clamp(40px, 3.13vw,50px);}
    .header .logo{width: clamp(140px,13.13vw,210px);}
    .header .gnb > ul > li > ul{top: clamp(70px, 5.63vw,90px); width: clamp(166px, 11.25vw, 180px); }
    .header .gnb > ul > li > a{padding: 0 clamp(30px, 2.75vw,44px); font-size: clamp(16px,1.13vw, 18px); line-height: clamp(70px, 5.63vw,90px);}
    .header .gnb > ul > li > ul > li > a{padding: clamp(4px,0.44vw,7px); font-size: clamp(15px,1.06vw,17px);}
    .header .all-menu p,
    .header .header-ui ul li a{font-size: clamp(15px,1.06vw,17px);}
    .header .header-ui ul li::after{right: -0.25vw;}
    .header .all-menu .snb > ul > li > a span{margin: clamp(30px, 3.75vw, 60px); font-size: clamp(22px,1.63vw,26px);}
    .header .all-menu .snb > ul > li > ul > li > a{font-size: clamp(17px,1.19vw,19px);}
    /* footer */
    .footer{padding: clamp(40px,5vw,80px) 0;}
    .footer .top-box figure{width: clamp(140px,13.13vw,210px);}
    .footer .info-box .box,
    .footer .top-box ul li a{font-size: clamp(16px,1.13vw,18px);}
    .footer .info-box .box address{margin: clamp(10px,0.94vw ,15px) 0;}
    .footer .copy{font-size: clamp(15px,1.06vw,17px); margin-top: clamp(18px,1.25vw,20px);}
}
@media screen and (max-width:1200px) {
    .common-btn{width: clamp(44px,5vw,60px); height: clamp(44px,5vw,60px);}
    .br1200{display: block;}
    /* header */
    .header{padding: 0 16px; height: clamp(60px, 5.83vw,70px);}
    .header .gnb{display: none;}
    .header .header-ui{gap:clamp(10px, 1.83vw,22px)}
    .header .all-menu .snb > ul > li > ul > li > a .all{display: block;}
}
@media screen and (max-width:1024px) {
    .w1000{padding: 0 16px;}

    /* header */
    .header .header-ui{gap: 4px;}
    .header .all-menu .snb > ul{min-height: auto; flex-wrap:wrap; text-align: left;}
    .header .all-menu .snb > ul > li{width: 100%; padding: 10px 0;}
    .header .all-menu .snb > ul > li::after{top:auto; bottom: 0; width: 100%; height: 1px;}
    .header .all-menu .snb > ul > li > a span{margin: 0 0 10px 0; padding: 0 4px; font-size: clamp(20px, 2.15vw, 22px);}
    .header .all-menu .snb > ul > li > ul{display:flex; flex-wrap:wrap; gap:0 16px; align-items: center;}
    .header .all-menu .snb > ul > li > ul > li{margin-bottom: 0;}
    .header .all-menu .snb > ul > li > ul > li > a{padding: 4px; font-size: 16px; opacity: 0.4;}
    .header .all-menu .snb > ul > li > ul > li > a .all{display: none;}
    .header .all-menu p{font-size: 14px;}
    /* footer */
    .footer .footer-info-box{flex-wrap:wrap; margin-top: clamp(24px, 4.69vw, 48px);}
    .footer .footer-info-box .sns-box{width: 150px; margin-left: auto; order:-1}
    .footer .footer-info-box .sns-box ul{ justify-content: flex-end; }
    .footer .info-box{width: 100%; flex-wrap:wrap; margin-top: 40px;}
    .footer .info-box .box{width: 100%; margin-top: 10px;}
    .footer .info-box .box:first-of-type{margin-top: 0;}
    .footer .info-box .box ul{gap: 6px 14px;}
    .footer .info-box .box ul li span:last-of-type{margin-left: 6px;}
    .footer .info-box .box, 
    .footer .top-box ul li a{font-size: 15px;}
    .footer .info-box .box span{font-size: 16px;}
    .footer .copy{font-size: 14px;}
}
@media screen and (max-width:768px) {
    .br768{display: block;}
    /* footer */
    .footer .top-btn{bottom: -20px;}
    
}