@charset "utf-8";


.doc{font-size: 16px;}
.box0{ max-width: 96%; margin:0 auto; position:relative } 
.box1{ width:1300px;max-width: 96%; margin:0 auto; position:relative }
.mobile_only{display:none;}

/*header*/
#header{z-index: 200; position: fixed; top: 0; left: 0; width:100%;}
#header:after{content:''; width:100%; height: 0px; background-color:rgba(255,255,255,.9); position: absolute; top: 0; left: 0; z-index: 1; transition: .3s;}
#header.Aon:after{ height: 420px;}
#header .h_wrap{position: relative; z-index: 2; }
#header .h_wrap:hover{ border-bottom:1px solid #eee; background-color:rgba(255,255,255,.85);}
#header .va_wrap,
#header .h_wrap{height:var(--header_H);}

#header #logo{z-index:800;}
#header #logo a{position: relative;}
#header #logo img{display:block;}
#header .gnb_wrap{margin:0 auto;}
#header .gnb_wrap .gnb .depth1{width:160px; position: relative;}
#header .gnb_wrap .gnb .depth1 > a{font-size: 1.125em; line-height: inherit; font-weight:600; color:#222; position: relative;}
#header .gnb_wrap .gnb .depth1 > a:after{content:''; width:0%; height: 3px; background-color: var(--mainColor); position: absolute; bottom:-1px; left: 50%; transform: translateX(-50%); transition: .3s;}
#header .gnb_wrap .gnb .depth1:hover > a:after{width:100%;}
#header .gnb_wrap .gnb .depth1 > ul{ width: 100%; transition:all .5s; position:absolute; left:50%; transform:translateX(-50%); opacity:0; height: 0; overflow: hidden;}
#header .gnb_wrap .gnb .depth1 > ul > .depth2 a{display: block; text-align: center; color:#444; font-weight:400; padding: 15px 10px; font-size:1.068em;}
#header .gnb_wrap .gnb .depth1 > ul > .depth2 a:hover{color: var(--mainColor);}
#header.Aon .gnb_wrap .gnb .depth1 ul{ opacity:1; overflow: visible; height: 320px;}

/*검색*/
#header .hd_sch_btn{font-size:1.125em; color:#555; cursor: pointer;}
#header .hd_sch_btn.on .xi:before{content:'\e921';}
#header .hd_sch_wr #hd_sch{border:1px solid #ccc; border-radius: 50px; position: relative; width:240px; overflow: hidden;}
#header .hd_sch_wr #hd_sch #sch_stx{border:0; background:transparent; color:#555; width:100%; height: 45px; padding:5px 55px 5px 20px; font-size:.95em; box-sizing: border-box;}
#header .hd_sch_wr #hd_sch #sch_stx::placeholder{color:#aaa!important;}
#header .hd_sch_wr #hd_sch button{border:0; background-color:var(--mainColor); width:38px; height: 38px; color:#fff; position: absolute; top:50%; transform: translateY(-50%); right:4px; border-radius: 50%; font-size:.9em;}

/*회원*/
#header .hd_login{margin-left:20px;}
#header .hd_login > li a{color:#555; margin-left:15px; font-weight: 300;}
#header .hd_login > li:first-child a{margin-left:0px;}
#header .hd_login > li .xi{vertical-align: baseline; margin-right:4px;}

/*전체메뉴버튼*/
#header .btn_gnb{width:35px; height: 21px; position: relative; z-index: 10000; cursor: pointer;}
#header .btn_gnb span{display:block; width:70%; height: 2px; background-color: #333; transition: .3s; margin-left:auto;}
#header .btn_gnb span:nth-child(2){width:100%; margin:8px 0;}
#header .btn_gnb:hover span,
#header .btn_gnb.on span{width:100%;}
#header .btn_gnb.on span:nth-child(2){display:none;}
#header .btn_gnb.on span:nth-child(1){position: absolute; top: 50%; left: 0; transform:translateY(-50%) rotate(45deg)}
#header .btn_gnb.on span:nth-child(3){position: absolute; top: 50%; right: 0; transform:translateY(-50%) rotate(-45deg)}

.scroll #header{background-color:rgba(255,255,255,.7); backdrop-filter: blur(5px); transition: .8s;}

/*white_ver*/
.scroll #header.white{background-color:transparent; backdrop-filter: blur(0px);}
#header.white .gnb_wrap .gnb .depth1 > a{color:#fff;}
#header.white #logo a:before{content:''; background-image: url(../img/main/logo_w.png); position: absolute; top: 0; left: 0; width:100%; height: 100%; background-size: cover;}
#header.white #logo img{opacity: 0;}
#header.white .btn_gnb span{background-color: #fff;}

/*black_ver*/
#header:hover #logo a:before,
#header.black #logo a:before,
#header.a_menu_black #logo a:before{display:none!important;}
#header:hover #logo img,
#header.black #logo img,
#header.a_menu_black #logo img{opacity: 1!important;}
#header:hover .gnb_wrap .gnb .depth1 > a,
#header.black .gnb_wrap .gnb .depth1 > a,
#header.a_menu_black .gnb_wrap .gnb .depth1 > a{color:#222!important;}
#header:hover .btn_gnb span,
#header.black .btn_gnb span,
#header.a_menu_black .btn_gnb span{background-color: #333!important;}


/*탑버튼*/
.qk_list{position: fixed; top:50%; right: 26px;z-index: 100;font-size: 16px; transform: translateY(-50%);}
.qk_list li{ margin-top: 5px;}
.qk_list li a{display: block; width: 52px; height: 52px; line-height: 52px; text-align: center;  border-radius: 50%; font-size: 1.45em;  box-shadow: 2px 2px 3px rgb(0 0 0 / 20%); overflow: hidden; margin-left: auto; background-color: #333; color: #fff; transition: .5s;}
.qk_list li .xi{width: 52px; line-height: 52px; text-align:center;}
.qk_list li .stx{font-style: normal; font-size: .75em; width:0; overflow: hidden; display: none; font-weight: 700;}
.qk_list li a:hover .stx{width:auto; overflow: hidden; display: block;}
.qk_list li .qk_call{background-color:#e60013}
.qk_list li .qk_call:hover{width:190px; border-radius: 50px;}
.qk_list li .qk_inq .xi{font-size:.85em;}
.qk_list li .qk_inq .stx{font-size:.7em;}
.qk_list li .qk_inq:hover{width:140px; border-radius: 50px;}

/*footer*/
#footer{border-radius: 40px 40px 0 0; background-color: #151515;position: relative; z-index: 1;}
#footer .f_menu{border-bottom:1px solid rgba(255,255,255,.1); padding:55px 0;}
#footer .f_menu > li:not(:last-child){margin-right:55px;}
#footer .f_menu > li a{color:#eee; font-size:1.125em;}
#footer .f_bottom{padding:50px 0 120px;}
#footer .f_bottom .f_info{width:calc(100% - 200px); padding-left:110px; margin-top:7px;}
#footer .f_bottom .f_info > li{color:#ccc; font-weight: 300; margin-right:70px; font-size:1.068em; margin-bottom: 15px; opacity: .85;}
#footer .f_bottom .f_info > li .fwSB{color:#eee; margin-right:10px;}
#footer .f_bottom .f_info > li.copyright{margin:25px 0 0 0;} 
#footer .f_bottom .f_info > li.copyright a{font-size:.875em; color:#eee; opacity: .5; letter-spacing: 0px; font-weight: 200;} 
.sub #footer{margin-top:10em;}
.main #footer{margin-top: -2em;}

/*서브 비주얼*/
.sub_v_wrap{position: relative; margin-bottom: 60px; overflow: hidden;}
#sub_visual{height: 460px; transition:1s; position: relative; text-align: center;}
#sub_visual:after{content:''; width:100%; height: 100%; background-color: rgba(0,0,0,.3); position: absolute; top: 0; left: 0;}
#sub_visual .bgfix{width:110%; height: 100%; transition: 5000ms ease;  position: absolute; top: 0; left: 53%; z-index: -1; transform: translateX(-50%); }
/*#sub_visual .sub_v_stt{ font-weight: 700; color:var(--mainColor); margin-bottom: 30px; z-index: 10; opacity:0; transition:1s;} 
#sub_visual .sub_v_stt .bar{width:30px; height: 1px; background-color: var(--mainColor); display: inline-block; opacity: .5; margin-left:10px;}*/
#sub_visual .sub_v_tit{ font-weight: 800; font-size:4em; z-index: 10; line-height: 1.3; opacity:0; transition:1s; color:#fff; position: relative; }  
.load #sub_visual .bgfix{left:50%;}
.load #sub_visual .sub_v_stt{ opacity:1}
.load #sub_visual .sub_v_tit{ opacity:1}

#sub_visual.sub10 .bgfix{background-image:url(../img/sub/v_01.jpg);}
#sub_visual.sub20 .bgfix{background-image:url(../img/sub/v_02.jpg);}
#sub_visual.sub30 .bgfix{background-image:url(../img/sub/v_03.jpg);}
#sub_visual.sub40 .bgfix{background-image:url(../img/sub/v_04.jpg);}
#sub_visual.sub50 .bgfix{background-image:url(../img/sub/v_05.jpg);}
#sub_visual.sub50 .bgfix{background-image:url(../img/sub/v_06.jpg);}

#snb_tab { border-top:1px solid rgba(255,255,255,.3); position: absolute; bottom:0; left: 0; width:100%; z-index: 10;}
#snb_tab .snb_list .sdp_list{width:100%;}
#snb_tab .snb_list .sdp_list > li{width:20%;}
#snb_tab .snb_list .sdp_list > li a{color:rgba(255,255,255,.85); padding:0 5px; display: block; font-size:1.125em; text-align: center; height:65px;}
#snb_tab .snb_list .sdp_list > li.on a{color:var(--subColor); font-weight: 500; position: relative;}
#snb_tab .snb_list .sdp_list > li.on a .va:before{content:''; width:100%; height: 3px; background-color: var(--subColor); position: absolute; top: -2px; left: 50%; transform: translateX(-50%);} 


/*컨텐츠 페이지*/
.ctt_admin{display:none;}/*관리자 내용수정 버튼*/
#ctt header{display:none;}/*컨텐츠 페이지 타이틀 header*/

/*컨텐츠 타이틀*/
.container_title{font-weight: 200; font-size: 2.125em; padding-top: 35px; margin: 55px 0; text-align: center; position: relative;}
.container_title:before{content:''; width:1px; height: 26px; visibility: hidden; transition: .8s; transition-timing-function: ease-in-out; transform: scaleY(0); transform-origin: left top; background: #222; position: absolute; top: 0; left: 50%;}
.load .container_title:before{transform: scaleY(1); visibility: visible;} 

/*개인정보&이용약관*/
.agree_box{ border:1px solid #ddd; background:#f9f9f9; border-radius:5px}
.agree_box .in_con{  padding:2em; border:1px solid #ededed; margin:1em; background:#fff;}
.agree_box .in_con .agree_wrap{ font-size: .938em;}
.agree_box .in_con .agree_wrap span{ display: block;}


/*=================================================================main============================================================*/

/*메인 비주얼*/
.mainSlider{position:relative; overflow:hidden; height: 100vh;} 
.mainSlider .el{ height:100vh; position:relative; overflow:hidden}
.mainSlider .el .bg{ position:absolute; right:0; top:50%; transform: translateY(-48%); width:100%; height:calc(100vh + 15%); background-repeat:no-repeat; background-position:center center; background-size:cover; transition: 1.5s; transition-delay: 2s; animation: bg_ani 4s infinite ease-in-out;}
.mainSlider .slogan{ position:absolute; top:50%; left:50%; transform: translate(-50%, -60%); color:#fff; text-align: center;}
.mainSlider .slogan .t1{ font-size:5.625em; display:block; transform:translateY(1em); font-weight: 800; opacity:0; margin-bottom: 5px; line-height: 1.2;}
.mainSlider .slogan .t2{ font-size:1.625em; transform:translateY(1em); opacity:0; line-height: 1.7; margin-top:30px;}
.load .mainSlider .slogan .t1{ transform:translateY(0); opacity:1; transition:1s;}
.load .mainSlider .slogan .t2{ transform:translateY(0); opacity:1; transition:1s; transition-delay:.5s}

.main_vod{height:100vh; overflow: hidden; position: relative;}
.main_vod:after{content:''; width:100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.2);}
.main_vod .vod{ position: absolute; top: 50%;  left: 50%;  transform: translate(-50%, -50%);}
.main_vod .slogan{ position:absolute; top:50%; left:50%; transform: translate(-50%, -60%); color:#fff; text-align: center; z-index: 10;}
.main_vod .slogan .t1{ font-size:5.625em; display:block; transform:translateY(1em); font-weight: 800; opacity:0; margin-bottom: 5px; line-height: 1.2;}
.main_vod .slogan .t2{ font-size:1.625em; transform:translateY(1em); opacity:0; line-height: 1.7; margin-top:30px;}
.load .main_vod .slogan .t1{ transform:translateY(0); opacity:1; transition:1s;}
.load .main_vod .slogan .t2{ transform:translateY(0); opacity:1; transition:1s; transition-delay:.5s}

@keyframes bg_ani{
0%{ transform: translateY(-48%)}
50%{transform: translateY(-46%)}
100%{ transform: translateY(-48%)}	
}

/*메인 영상*/
* { box-sizing: border-box; }
.main_vod .video-background {background: #000;position: fixed;top: 0; right: 0; bottom: 0; left: 0;z-index: -99;}
.main_vod .video-foreground,
.main_vod .video-background iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-image: url(/theme/aram_02/img/main/vod_sum.jpg);}
.main_vod #vidtop-content {top: 0; color: #fff;}
.main_vod .vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.main_vod .vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.main_vod .vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }

@media (min-aspect-ratio: 16/9) {
  .main_vod .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .main_vod .video-foreground { width: 400%; left: -160%; }
}
@media all and (max-width: 600px) {
.main_vod .vid-info { width: 50%; padding: .5rem; }
.main_vod .vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.main_vod .vid-info .acronym { display: none; }
}
/*메인 영상*/


.scroll_wrap{position: absolute; bottom: 2em; left:50%; transform: translateX(-50%); z-index: 10; opacity: 0; transition: .5s; transition-delay: 1s;}
.load .scroll_wrap{opacity: 1;}

.rs_btn{ width:113px; height: 113px; line-height: 113px; text-align: center; position: relative; margin: 0 auto;}
.rs_btn:before{content: ''; width: 100%; height: 100%; background-image: url(../img/main/scroll_txt.png); position: absolute;  top: 0; left: 0; animation: rs_scroll 15s infinite linear; background-size: cover;}
.rs_btn .arr{width:1px; height: 33px; background-color: #fff; position: relative;}
.rs_btn .arr:before,
.rs_btn .arr:after{content:''; width: 17px; height: 17px; border-radius: 50%; border-left: 1px solid #fff; display: block; transform: rotate(45deg); position: absolute; bottom: -4px; left: 0px;}
.rs_btn .arr:before{left:-17px; transform: rotate(135deg);}
@keyframes rs_scroll{
0%{-webkit-transform:rotate(0);transform:rotate(0)}
100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}
}

.rs_btn.st2{ width:106px; height: 106px; line-height: 106px; margin: 50px 0 0;}
.rs_btn.st2:before{background-image: url(../img/main/scroll_txt_black.png);}
.rs_btn.st2 .arr{width:33px; height: 1px; background-color: #666;}
.rs_btn.st2 .arr:before,
.rs_btn.st2 .arr:after{width: 17px; height: 17px; border-left: 1px solid #666; transform: rotate(45deg); position: absolute; bottom: -16px; left:inherit; right:-6px;}
.rs_btn.st2 .arr:before{bottom:0px; transform: rotate(-45deg);}

.rs_btn.st3{width:141px; height: 141px; line-height: 141px; border:0; background-color: transparent; font-size:1.125em; color:#444;}
.rs_btn.st3:before{background-image: url(../img/main/scroll_txt_inq.png);}


/*메인 inc*/
.main_tit{text-align:center; padding-top:150px; padding-bottom: 100px;}
.main_tit .in_tt{font-size:5em; color:#111; font-weight: 700;}
.main_tit .in_tx,
.main_company .main_com_slog .t2{font-size:1.625em; color:#444; margin-top:25px;}

.main_portfolio{overflow:hidden; background-color: #fff;}
.main_portfolio .portfolio_trigger{ background-color: #f78811; /*padding:210px 0 230px;*/ position: relative; min-height: 100vh;}
.main_portfolio .portfolio_trigger:before{content:''; background-image: url("../img/main/main_portline_01.png"); width:405px; height: 597px; position: absolute; bottom:0; left: 0;}
.main_portfolio .portfolio_trigger:after{content:''; background-image: url("../img/main/main_portline_02.png"); width:531px; height: 463px; position: absolute; top:0; right: 5%; z-index: -1;}
.main_portfolio .portfolio_trigger .port_list{z-index: 10;}
.main_portfolio .portfolio_trigger .port_list li a{display:block; width:790px; height:480px; cursor: none; position: relative; margin:0 40px;}
.main_portfolio .portfolio_trigger .port_list li:first-child a{margin-left:80px;}
.main_portfolio .portfolio_trigger .port_list li:last-child a{margin-right:80px;}
.main_portfolio .portfolio_trigger .port_list li a:before{content:''; width:100%; height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; opacity: 0; transition: .3s;}
.main_portfolio .portfolio_trigger .port_list li a:hover:before{opacity: 1;}
.main_portfolio .portfolio_trigger .view_r{ position: fixed; top:0; left: 0; z-index: 100000; pointer-events: none; opacity: 0;}
.main_portfolio .portfolio_trigger .btn_view{display:block; background-color:var(--mainColor); color:#fff!important; font-weight: 300; width:120px; height: 120px; line-height: 120px; text-align: center; position: absolute; left: 0; top: 0; border-radius: 50%; transition: .3s; transform: translate(-50%, -50%);}
.main_portfolio .portfolio_trigger .scroll_txt{text-align:center; color:#0000; width:var(--w); letter-spacing: var(--w); overflow: hidden; white-space: nowrap; line-height: 2em; position: absolute; bottom:8%; left: 50%; transform: translateX(-50%); animation: scroll_txt 2s infinite linear; text-shadow: 
 calc( 0*var(--w)) 0 #fff,calc(-1*var(--w)) 0 #fff,calc(-2*var(--w)) 0 #fff,calc(-3*var(--w)) 0 #fff,calc(-4*var(--w)) 0 #fff, calc(-5*var(--w)) 0 #fff,calc(-6*var(--w)) 0 #fff,calc(-7*var(--w)) 0 #fff,calc(-8*var(--w)) 0 #fff,calc(-9*var(--w)) 0 #fff,calc(-10*var(--w)) 0 #fff}
.main_portfolio .portfolio_trigger .scroll_txt:before {content:"SCROLL DOWN";}

.main_portfolio .portfolio_box{background-color: #f78811; position: relative; padding: 5em 0;}
.main_portfolio .portfolio_slide:before{content:''; background-image: url("../img/main/main_portline_01.png"); width:405px; height: 597px; position: absolute; top: 30%; right: 40%;}
.main_portfolio .portfolio_slide:after{content:''; background-image: url("../img/main/main_portline_02.png"); width:531px; height: 463px; position: absolute; bottom: 55%; left: 45%;}

.main_portfolio .portfolio_box:after{top:-10%; right: -10%;}
.main_portfolio .portfolio_box:before{bottom: -10%; left:-10%;}


@keyframes scroll_txt {
  9% {text-shadow: 
        calc( 0*var(--w)) -10px #fff,calc(-1*var(--w)) 0 #fff,calc(-2*var(--w)) 0 #fff,calc(-3*var(--w)) 0 #fff,calc(-4*var(--w)) 0 #fff, 
        calc(-5*var(--w)) 0 #fff,calc(-6*var(--w)) 0 #fff,calc(-7*var(--w)) 0 #fff,calc(-8*var(--w)) 0 #fff,calc(-9*var(--w)) 0 #fff, calc(-10*var(--w)) 0 #fff}
  18% {text-shadow: 
        calc( 0*var(--w)) 0 #fff,calc(-1*var(--w)) -10px #fff,calc(-2*var(--w)) 0 #fff,calc(-3*var(--w)) 0 #fff,calc(-4*var(--w)) 0 #fff, 
        calc(-5*var(--w)) 0 #fff,calc(-6*var(--w)) 0 #fff,calc(-7*var(--w)) 0 #fff,calc(-8*var(--w)) 0 #fff,calc(-9*var(--w)) 0 #fff, calc(-10*var(--w)) 0 #fff}
  27% {text-shadow: 
        calc( 0*var(--w)) 0 #fff,calc(-1*var(--w)) 0 #fff,calc(-2*var(--w)) -10px #fff,calc(-3*var(--w)) 0 #fff,calc(-4*var(--w)) 0 #fff, 
        calc(-5*var(--w)) 0 #fff,calc(-6*var(--w)) 0 #fff,calc(-7*var(--w)) 0 #fff,calc(-8*var(--w)) 0 #fff,calc(-9*var(--w)) 0 #fff, calc(-10*var(--w)) 0 #fff}
  36% {text-shadow: 
        calc( 0*var(--w)) 0 #fff,calc(-1*var(--w)) 0 #fff,calc(-2*var(--w)) 0 #fff,calc(-3*var(--w)) -10px #fff,calc(-4*var(--w)) 0 #fff, 
        calc(-5*var(--w)) 0 #fff,calc(-6*var(--w)) 0 #fff,calc(-7*var(--w)) 0 #fff,calc(-8*var(--w)) 0 #fff,calc(-9*var(--w)) 0 #fff, calc(-10*var(--w)) 0 #fff}
  45% {text-shadow: 
        calc( 0*var(--w)) 0 #fff,calc(-1*var(--w)) 0 #fff,calc(-2*var(--w)) 0 #fff,calc(-3*var(--w)) 0 #fff,calc(-4*var(--w)) -10px #fff, 
        calc(-5*var(--w)) 0 #fff,calc(-6*var(--w)) 0 #fff,calc(-7*var(--w)) 0 #fff,calc(-8*var(--w)) 0 #fff,calc(-9*var(--w)) 0 #fff, calc(-10*var(--w)) 0 #fff}
  54% {text-shadow: 
        calc( 0*var(--w)) 0 #fff,calc(-1*var(--w)) 0 #fff,calc(-2*var(--w)) 0 #fff,calc(-3*var(--w)) 0 #fff,calc(-4*var(--w)) 0 #fff, 
        calc(-5*var(--w)) -10px #fff,calc(-6*var(--w)) 0 #fff,calc(-7*var(--w)) 0 #fff,calc(-8*var(--w)) 0 #fff,calc(-9*var(--w)) 0 #fff, calc(-10*var(--w)) 0 #fff}
  63% {text-shadow: 
        calc( 0*var(--w)) 0 #fff,calc(-1*var(--w)) 0 #fff,calc(-2*var(--w)) 0 #fff,calc(-3*var(--w)) 0 #fff,calc(-4*var(--w)) 0 #fff, 
        calc(-5*var(--w)) 0 #fff,calc(-6*var(--w)) -10px #fff,calc(-7*var(--w)) 0 #fff,calc(-8*var(--w)) 0 #fff,calc(-9*var(--w)) 0 #fff, calc(-10*var(--w)) 0 #fff}
  72% {text-shadow: 
        calc( 0*var(--w)) 0 #fff,calc(-1*var(--w)) 0 #fff,calc(-2*var(--w)) 0 #fff,calc(-3*var(--w)) 0 #fff,calc(-4*var(--w)) 0 #fff, 
        calc(-5*var(--w)) 0 #fff,calc(-6*var(--w)) 0 #fff,calc(-7*var(--w)) -10px #fff,calc(-8*var(--w)) 0 #fff,calc(-9*var(--w)) 0 #fff, calc(-10*var(--w)) 0 #fff}
  81% {text-shadow: 
        calc( 0*var(--w)) 0 #fff,calc(-1*var(--w)) 0 #fff,calc(-2*var(--w)) 0 #fff,calc(-3*var(--w)) 0 #fff,calc(-4*var(--w)) 0 #fff, 
        calc(-5*var(--w)) 0 #fff,calc(-6*var(--w)) 0 #fff,calc(-7*var(--w)) 0 #fff,calc(-8*var(--w)) -10px #fff,calc(-9*var(--w)) 0 #fff, calc(-10*var(--w)) 0 #fff}
  90% {text-shadow: 
        calc( 0*var(--w)) 0 #fff,calc(-1*var(--w)) 0 #fff,calc(-2*var(--w)) 0 #fff,calc(-3*var(--w)) 0 #fff,calc(-4*var(--w)) 0 #fff, 
        calc(-5*var(--w)) 0 #fff,calc(-6*var(--w)) 0 #fff,calc(-7*var(--w)) 0 #fff,calc(-8*var(--w)) 0 #fff,calc(-9*var(--w)) -10px #fff, calc(-10*var(--w)) 0 #fff}
  99% {text-shadow: 
        calc( 0*var(--w)) 0 #fff,calc(-1*var(--w)) 0 #fff,calc(-2*var(--w)) 0 #fff,calc(-3*var(--w)) 0 #fff,calc(-4*var(--w)) 0 #fff, 
        calc(-5*var(--w)) 0 #fff,calc(-6*var(--w)) 0 #fff,calc(-7*var(--w)) 0 #fff,calc(-8*var(--w)) 0 #fff,calc(-9*var(--w)) 0 #fff, calc(-10*var(--w)) -10px #fff}	
}


.main_service{ padding-bottom: 160px; background-color: #fff;overflow:hidden}
.main_service .swiper-slide{height: 560px;}
.main_service .swiper-slide.swiper-slide-prev,
.main_service .swiper-slide.swiper-slide-next{padding:40px 30px; box-sizing: border-box; transition: .3s;}
.main_service .swiper-slide .in{height: 100%; position: relative; overflow: hidden;}
.main_service .swiper-slide .in .in_bg{width:100%; height: 100%; transition: .5s;}
.main_service .swiper-slide .in:hover .in_bg{transform: scale(1.1);}
.main_service .swiper-slide .in .in_txt{position: absolute; bottom:50px; left:45px; color:#fff;}
.main_service .swiper-slide .in .in_txt .in_nm{font-size:1.375em; font-weight: 300;}
.main_service .swiper-slide .in .in_txt .in_tt{font-size:2.5em; font-weight:700; }
.main_service .swiper-slide .in .in_txt .in_tx{font-size:1.25em; font-weight: 300;}
.main_service .service_control{margin-top:90px;}
.main_service .service_control .xi{width:44px; height: 44px; line-height: 44px; border:1px solid #ddd; color:#aaa; border-radius: 50%; text-align: center; margin:0 25px; cursor: pointer; transition: .3s; font-size:1.25em;}
.main_service .service_control .xi:hover{background-color:var(--mainColor); border-color:var(--mainColor); color:#fff;}
.main_service .service_control .b_pagen{width:450px; height: 4px; background-color: #ccc; position: relative;}
.main_service .service_control .b_pagen .swiper-pagination-progressbar-fill{ background-color:var(--mainColor);}

.main_company{background-color:#f5f5f5; padding:180px 0; position: relative;overflow:hidden}
.main_company > .box1{position: relative; z-index: 10;}
.main_company .main_com_slog {text-align: center; margin-bottom: 230px;}
.main_company .main_com_slog .t1{font-size:5.125em; font-weight: 500; text-align: center; line-height: 1.2; letter-spacing: -.5px; color:#111; margin-bottom: 40px;}
.main_company .main_com_slog .t1 .co_st{color:#666;}
.main_company .main_tit{padding-bottom:30px; padding-top:0;}
.main_company .main_tit .in_tt{text-align:left;}
.main_company .comp_con .in_wrap .in_img.on .bgfix{transform: scale(1.1); transition: .5s;}
.main_company .comp_con .in_wrap .in_txt .in_tt{font-size:3.25em; color:#111; font-weight: 700;}
.main_company .comp_con .in_wrap .in_txt .in_tx{font-size:1.2em; color:#555; line-height: 1.6; margin-top:30px;}
.main_company .comp_con .in_wrap.st1 .in_img{width:800px; height: 500px; overflow:hidden}
.main_company .comp_con .in_wrap.st1 .in_img .bgfix{width:0; height: 100%; background-image: url(../img/main/main_com_img01.jpg);}
.main_company .comp_con .in_wrap.st1 .in_img .bgfix.Aon{width:100%;}
.main_company .comp_con .in_wrap.st1 .in_txt{width:calc(100% - 800px); padding:0 0 40px 80px;}
.main_company .comp_con .in_wrap.st2{margin-top:150px; position: relative;}
.main_company .comp_con .in_wrap.st2 .in_img{width:560px; height: 700px; overflow:hidden}
.main_company .comp_con .in_wrap.st2 .in_img .bgfix{width:100%; height: 0; background-image: url(../img/main/main_com_img02.jpg); }
.main_company .comp_con .in_wrap.st2 .in_img .bgfix.Aon{height:100%;}
.main_company .comp_con .in_wrap.st2 .in_txt{width:calc(100% - 560px); text-align: right; padding:0 100px 40px 0;}
.main_company .comp_con .in_wrap.st2 .rs_btn.st2{margin-left:auto;}
.main_company .comline_01{position: absolute; top: 140px; left:140px; z-index:0;}
.main_company .comline_02{position: absolute; top: 0; right:100px; z-index:0;}
.main_company .comline_03{position: absolute; bottom: 0; left:80px; z-index:0;}
.main_company .comline_03 img{display:block;}
.main_company .comtxt{font-size:5.25em; color:#e3e3e3; font-weight: 500; line-height: 1.1; position: absolute; top: 0; left: 0;}
.main_company .comtxt.Aon{left: -15%;}

.main_contact{ background-color: #fff; position: relative; padding-bottom: 10em;overflow:hidden}
.main_contact .main_tit{padding-bottom:50px;}
.main_contact .cont_info{font-size:1.5em; color:#444;}
.main_contact .cont_info > li{margin: 0 20px; font-weight: 300;}
.main_contact .cont_info > li .fwSB{margin:0 10px;}

.inq_wrap {border-top:2px solid #333; padding-top:35px; margin-top:35px;}
.inq_wrap .board_inq .w_form_tit{width:25%;}
.inq_wrap .board_inq th{text-align:left; color:#333; font-size:1.185em; font-weight: 600}
.inq_wrap .board_inq th,
.inq_wrap .board_inq td{padding:10px 25px;}

.inq_wrap .form_st.st_01{margin-right:-10px;}
.inq_wrap .form_st.st_01 > li{width:50%;}
.inq_wrap .form_st.st_01 > li .in{margin-right:10px;}

.inq_wrap .form_st{margin-top:-.7em;}
.inq_wrap .form_st .in{ position:relative; margin-top:.7em;}
.inq_wrap .form_st .in .lab{ position:absolute; left:.75em; top:50%; line-height:1em; margin-top:-.5em; color:#999; background:#fff; padding:0 .25em; transition:.3s}
.inq_wrap .form_st .in .lab.st{ top:1.7em;}
.inq_wrap .form_st .in .inp{ width:100%; box-sizing:border-box; padding:1em; height:3.5em; border:none; position:relative; z-index:1; background:none; }
.inq_wrap .form_st .in textarea.inp{width:100%!important; height:10em;}
.inq_wrap .form_st .in .line{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid #ddd; border-radius:.25em; box-sizing:border-box; transition:.3s}
.inq_wrap .form_st .in .inp:focus ~ .lab,
.inq_wrap .form_st .in .inp.on ~ .lab{ transform:scale(.9,.9); top:0; color:var(--subColor); margin-left:-.5em}
.inq_wrap .form_st .in .inp:focus ~ .icon,
.inq_wrap .form_st .in .inp.on ~ .icon{ color:#333}
.inq_wrap .form_st .in .inp:focus ~ .line,
.inq_wrap .form_st .in .inp.on ~ .line{ border-color:var(--subColor)}

.inq_wrap .form_st .in .label_box{margin-left:-45px; padding: 1.7em .5em; position: relative; z-index: 10;}
.inq_wrap .form_st .in .label_st{margin-left:45px;}
.inq_wrap .form_st .in .label_st:not(.cssbrowser) input ~ span{color:#666;}
.inq_wrap .form_st .in .label_st:not(.cssbrowser) input:checked ~ span{color: var(--mainColor);}
.inq_wrap .form_st .in .label_st:not(.cssbrowser) .xi:before{font-size:1.5em;}
.inq_wrap .form_st .in .label_st:not(.cssbrowser) input:checked ~ .xi:before{color: var(--mainColor);}

.inq_wrap .form_st input[type=text]:focus,
.inq_wrap .form_st input[type=password]:focus,
.inq_wrap .form_st textarea:focus,
.inq_wrap .form_st select:focus {-webkit-box-shadow:none; -moz-box-shadow: none; box-shadow: none; border: none !important;}
.inq_wrap .form_st select{cursor: pointer;}
.inq_wrap .form_st .req{position:absolute; top: 5px; right: 10px; color:#f13a3a;}

.inq_wrap .file_info{font-size:.938em; color:#aaa; margin-top:10px; letter-spacing: 0;}
.inq_wrap .file_info .st{color:#888; border-bottom:1px solid #888;}
.inq_wrap .file_info .xi{color:#888; vertical-align: middle; font-size:1.125em;}
.inq_wrap #captcha #captcha_img{height:46px;}
.inq_wrap #captcha #captcha_key{width:100px; height:46px; font-size:1.25em; font-weight: normal;}
.inq_wrap #captcha #captcha_mp3{width:46px; height: 46px; background-color: #c9c9c9; background-position: center 3px;}
.inq_wrap #captcha #captcha_reload{width:46px; height: 46px; background-color: #c9c9c9; background-position: center -37px;}
.inq_wrap .w_flex .w_box{width:50%;}
.inq_wrap .cont_check {font-size:1.125em; line-height: 1;}
.inq_wrap .cont_check .label_st:not(.cssbrowser) .xi:before{font-size:1.5em;}
.inq_wrap .cont_check .label_st:not(.cssbrowser) input:checked ~ .xi:before{color: var(--mainColor);}
.inq_wrap .cont_check a{color:#888}
.inq_wrap .rs_btn{margin:30px auto 0;}
 

/*=================================================================sub============================================================*/

.page_txt{}
.page_tit{font-size: 4.5em; font-weight: 700; line-height: 1.2; margin-bottom: 20px;}
.page_tt{font-size: 1.25em; font-weight: 600;}
.page_te{font-size: 1.825em; font-weight: 600;}


.company_wrap{}
.company_wrap .com_con{margin-top: 5em;}
.company_wrap .page_txt{width: 40%;}
.company_wrap .txt_box{width: 60%; padding-left: 6em;}
.company_wrap .txt_box .tt{font-size: 1.125em; font-weight: 300; line-height: 1.8; margin-bottom: 20px;}
.company_wrap .img_box{}
.company_wrap .img_box .img_z{width: 100%; height: 400px; margin-top: 4em; border: 1px solid #ddd;}


.history_wrap{position:relative; overflow:hidden; padding:2em 0}
.history_wrap:before,
.history_wrap .lineAni{ content:""; position:absolute; left:50%; top:0; width:1px; height:100%; background:#ddd}
.history_wrap .lineAni{ height:0; background:var(--mainColor); transition:.3s}
.history_wrap .lineAni:before,
.history_wrap:after{ content:""; position:absolute; left:50%; top:0; margin-left:-.5em; width:1em; height:1em; background:#fff; border:.25em solid var(--mainColor); border-radius:100%; box-sizing:border-box}
.history_wrap:after{ top:auto; bottom:0}
.history_wrap .history > li{ margin-top:2em}
.history_wrap .history > li:first-child{ margin-top:0}
.history_wrap .history > li .year_tt{ margin-bottom: 1.5em;}
.history_wrap .history > li .year_tt .wrap_in{ position:relative; overflow:hidden;}
.history_wrap .history > li .year_tt .tt{ display:inline-block; position:relative; padding:0 .5em; font-size:2.375em; font-weight:bold; color:var(--mainColor); font-family: 'LeferiPoint-SpecialA';}
.history_wrap .history > li .year_tt .tt:before{ content:""; position:absolute; right:100%; top:50%; margin-top:-7px; width:100%; border-top:2px dotted #aaa}
.history_wrap .history > li .year_img{width:80%; height: 220px; background-color: #aaa; margin: 20px 0 30px;}
.history_wrap .history > li .list{ width:50%; margin-top:1em}
.history_wrap .history > li .list > li{ margin-top:.5em}
.history_wrap .history > li .list > li:first-child{ margin-top:0}
.history_wrap .history > li .list .wrap_in{ padding:0 2em}
.history_wrap .history > li .list .wrap_in .detail > li .tt:after{ display: block; clear: both; content: '';}
.history_wrap .history > li .list .mont{ color: #999; font-weight: 600; font-size: 1.25em; display:block;}
.history_wrap .history > li .list .page_tx{font-size: 1.125em; line-height: 1.8;}
.history_wrap .history > li .list .detail{ width: 100%;}
.history_wrap .history > li .list .detail > li{ margin-top:.5em}
.history_wrap .history > li .list .detail > li:first-child{ margin-top:0}
.history_wrap .history > li .list .detail .tt{ position:relative; padding:0 1.5em; margin-top:.125em; margin-bottom: 1.5em; color:#444; line-height: 1.6;}
.history_wrap .history > li .list .detail .tt:before{ content:""; position:absolute; left:0; top:.7em; width:.75em; border-top:2px solid #aaa}
.history_wrap .history > li:nth-child(2n) .year_tt{ justify-content:flex-end; text-align:right}
.history_wrap .history > li:nth-child(2n) .year_tt .tt:before{ right:auto; left:100%}
.history_wrap .history > li:nth-child(2n) .year_img{margin-left:auto;}
.history_wrap .history > li:nth-child(2n) .list{ order:-1}
.history_wrap .history > li:nth-child(2n) .list > li > .flex{ justify-content:flex-end}
.history_wrap .history > li:nth-child(2n) .list .detail{ order:-1}
.history_wrap .history > li:nth-child(2n) .list .detail .tt{ text-align:right}
.history_wrap .history > li:nth-child(2n) .list .detail .tt:before{ left:auto; right:0}
.history_wrap .history > li:nth-child(2n) .list .mont{ /*float: right;*/ margin-left: 13px; margin-right: 0;}
.history_wrap .history > li:nth-child(2n) .list .page_tx{ /*float: right;*/}


.ledsign_wrap{} 
.ledsign_wrap .led_con{margin-top: 5em;}
.ledsign_wrap .page_txt{width: 40%;}
.ledsign_wrap .txt_box{width: 60%; padding-left: 6em;}
.ledsign_wrap .txt_box .tt{font-size: 1.125em; font-weight: 300; line-height: 1.8; margin-bottom: 20px;}
.ledsign_wrap .led_list{margin-right:-20px; margin-top: 4em; margin-bottom: 20px;}
.ledsign_wrap .led_list > li{width: 33.33%; margin-bottom: 20px;}
.ledsign_wrap .led_list > li .in{height: 300px; margin-right: 20px; border: 1px solid #ddd; padding: 40px; position: relative; color: #fff; }
.ledsign_wrap .led_list > li .in:after{content:''; display: block; width: 100%; height: 100%; background: var(--mainColor); opacity: 0; position: absolute; top: 0; left: 0; transition: .3s;}
.ledsign_wrap .led_list > li .in:hover:after{opacity: 1}
.ledsign_wrap .led_list > li .in .te{font-size: 1em; font-weight: 600; margin-bottom: 10px;position: relative; z-index: 1; /*width: 35px; height: 35px; text-align: center; align-content: center; border-radius: 50%;*/}
/*.ledsign_wrap .led_list > li:nth-child(1) .in .te{background-color: #e60012; transition: .3s;}
.ledsign_wrap .led_list > li:nth-child(1) .in:hover .te{background-color: rgba(255,255,255,.3);} 
.ledsign_wrap .led_list > li:nth-child(2) .in .te{background-color: #e94c08;}
.ledsign_wrap .led_list > li:nth-child(3) .in .te{background-color: #ed6a02;}
.ledsign_wrap .led_list > li:nth-child(4) .in .te{background-color: #f7b000;}
.ledsign_wrap .led_list > li:nth-child(5) .in .te{background-color: #fdcf00;}
.ledsign_wrap .led_list > li:nth-child(6) .in .te{background-color: #fff001;}*/
.ledsign_wrap .led_list > li .in .ti{font-size: 1.5em; font-weight: 600; margin-bottom: 1em;position: relative; z-index: 1;}
.ledsign_wrap .led_list > li .in .tt{font-size: 1.125em; position: relative; z-index: 1; }
.ledsign_wrap .sign_list{margin-top: 4em; margin-right: -20px;}
.ledsign_wrap .sign_list > li{width: 33.33%;}
.ledsign_wrap .sign_list > li .in{margin-right: 20px; padding: 40px; background: #f9f9f9; height: 460px; position: relative; overflow: hidden;}
.ledsign_wrap .sign_list > li .in .te{font-size: 1em; color: #999; margin-bottom: 5px;}
.ledsign_wrap .sign_list > li .in .ti{font-size: 1.75em; font-weight: 700; margin-bottom: 30px;}
.ledsign_wrap .sign_list > li .in .tt{font-size: 1.1em; line-height: 1.6;}
.ledsign_wrap .sign_list > li .in .img_z img{position: absolute; bottom: -20px; right: -20px; opacity: .6}
.ledsign_wrap .led_box{border-top: 1px solid #ddd; padding: 4em 0;}
.ledsign_wrap .led_box .page_te{width: 20%;}
.ledsign_wrap .led_box .img_box{width: 80%;}
.ledsign_wrap .led_box .img_box .in{width: 50%;}
.ledsign_wrap .led_box .img_box .in .img_z{margin-left: 20px;}


.esg_wrap{} 
.esg_wrap .esg_con{margin-top: 5em;}
.esg_wrap .page_txt{width: 40%;}
.esg_wrap .txt_box{width: 60%; padding-left: 6em;}
.esg_wrap .txt_box .tt{font-size: 1.125em; font-weight: 300; line-height: 1.8; margin-bottom: 20px;}
.esg_wrap .esg_box{padding: 8em 0 10em;}
.esg_wrap .esg_box.bg{background-color: #f9f9f9;margin-top: 4em;}
.esg_wrap .esg_box.st{padding: 12em 0 15em;}
.esg_wrap .esg_list{width: 100%; margin-top: 2em; text-align: center;}
.esg_wrap .esg_list > li{width: 33.33%;}
.esg_wrap .esg_list > li .in{margin-right: 20px; border: 1px solid #ddd; padding-bottom: 40px; background-color: #fff;}
.esg_wrap .esg_list > li .in .img_z{height: 250px;}
.esg_wrap .esg_list > li .in .ti{font-size: 1.5em; font-weight: 600; margin-top: 30px;}
.esg_wrap .esg_list > li .in .tt{font-size: 1em; color:#999; margin-bottom: 10px;margin-top: 5px; letter-spacing: 1px;}
.esg_wrap .esg_list > li .in .tx{font-size: 1.125em; font-weight: 300;}
.esg_wrap .txt_z{margin-top: 6.5em; text-align: center; font-size: 1.75em; font-weight: 700; position: relative;}
.esg_wrap .txt_z:after{content: ''; display: block; width: 10px; height: 10px; background: var(--mainColor); border-radius: 50%; position: absolute; top: -40px; left: 50%; transform: translateX(-50%);}
.esg_wrap .txt_z:before{content: ''; display: block; width: 1px; height: 60px; border-left: 6px dotted #ddd;  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);}
.esg_wrap .esg_box.st{color: #fff;}
.esg_wrap .esg_box.st .page_txt{margin-bottom: 2em;}
.esg_wrap .task_list{margin-right: -20px;}
.esg_wrap .task_list > li{width: 33.33%;}
.esg_wrap .task_list > li .in{border:1px solid rgba(255,255,255,.5); margin-right: 20px; padding: 60px 50px; }
.esg_wrap .task_list > li .in .icon{display:block; margin-bottom: 2em;}
.esg_wrap .task_list > li .in .ti{font-size: 1.5em; font-weight: 600; margin-bottom: 15px;}
.esg_wrap .task_list > li .in .task_list{fnot-size:1.1em; line-height: 1.6;}


.dot_list{font-size: 1.125em; font-weight: 300; line-height: 2; margin-left: 10px;}
.dot_list > li{position: relative;}
.dot_list > li:before{content:''; display: block; width: 3px; height: 3px; background: #fff; border-radius: 50%; position:absolute; top: 15px; left: -10px;}


/*인증서*/
#bo_gall .gall_text_href{margin: 0;}
#bo_gall .gall_tbox{padding: 15px 10px;}

/*오시는 길*/
.location_box{ margin: 0 auto; padding: 0 1em;}
.location_box .map_tw{padding-bottom:1em; font-size:1.5em;}
.location_box .map_tw .xi{ width: 44px; height: 44px; background: var(--mainColor); border-radius: 50%; line-height: 44px; margin-right: 10px; font-size:.938em; color:#fff;}
.location_box .map_view{ border-top:3px solid var(--mainColor); box-shadow: 0 0.25em 0.5em rgba(0,0,0,.2); transition: .3s;  padding: 1em; border-radius: 0 0 1em 1em;}
.location_box .map_view .tt {padding-bottom:10px; font-size:1.25em; color:#333; letter-spacing:-2px; vertical-align:middle;}
.location_box .map_view .xi {vertical-align:middle; font-size:1.125em; padding-right:5px;}
.location_box .map_view .map_cont .root_daum_roughmap .wrap_controllers{display:none;}
.location_box .info_list{margin-top:1em;}
.location_box .info_list > li { padding:2.5em 0; border-bottom:1px dotted #ddd;}
.location_box .info_list > li h3 { float:left; font-size:1.5em; font-weight:500; position: relative; padding-top:7px;}
.location_box .info_list > li h3:before{content:''; width:25px; height: 2px; background: var(--mainColor); position: absolute; top:0; left: 0;}
.location_box .info_list > li h3 .xi { font-size:1.125em; margin-right: 5px;}
.location_box .info_list > li .info { margin:0 0 0 240px;}
.location_box .info_list > li .info .in_tbox{border: 1px solid #ddd; padding: 1.5em; background-color: #f9f9f9; color:#333;}
.location_box .info_list > li .info .in_tbox .fwB{margin-right:8px; font-weight: 500;}
.root_daum_roughmap{width: 100%!important;}
.root_daum_roughmap .wrap_map{width: 100%; height: 440px!important;}