@charset "utf-8";

@import url('base.css');

/* --------------------------------------------
 * layout
/* ------------------------------------------ */
.mbg{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; z-index:3;}
body.ovf_hdn, .ovf_hdn{ overflow:hidden; height:100%;}

#wrap{ position:relative; width:100%; min-width: 1200px; margin:0 auto; overflow:hidden; }

#header{ position:fixed; top:0; left:0; width:100%; z-index:3; transition:all 0.2s ease-in-out; }
#header .inner{ position: relative; max-width:1200px; margin:0 auto; height: 96px; text-align: right; padding:30px 0 0 0;}
#header .inner::after{ content: ''; clear: both; display: block; font-size: 0;}
#header h1.logo{ position: absolute; top:30px; left:0; width:102px; text-align: left;}
#header h1.logo > a{ height:36px; text-indent: -9999px; display: block; background: url('../images/logo.png') 50% 50% no-repeat;}
#header .utill{ display: inline-block;}
#header .utill a{ display: inline-block; color:#fff; height: 40px; line-height: 38px; font-weight: 200;}
#header .utill a.buy,
#header .utill a.down{ padding:0 20px 0 28px; border:rgba(255,255,255,.2) 1px solid; border-radius: 20px;}
#header .utill a.buy:hover,
#header .utill a.down:hover{ background-color:rgba(255,255,255,.2);}
#header .utill a.down{ margin-left:2px;}
#header .utill a.buy::after{ content: ''; width: 9px; height: 9px; display: inline-block; background:url('../images/blt_prev.png') 50% 50% no-repeat; vertical-align: 1px; margin-left:40px;}
#header .utill a.down::after{ content: ''; width: 9px; height: 9px; display: inline-block; background:url('../images/blt_down.png') 50% 50% no-repeat; vertical-align: 1px; margin-left:40px;}
#header .utill a.buy.active{ background-color:#fff; color:#0e49db; font-weight: 400;}
#header .utill a.buy.active::after{ background:url('../images/blt_prev_on.png') 50% 50% no-repeat;}
#header .utill a.down.active{ background-color:#fff; color:#0e49db; font-weight: 400;}
#header .utill a.down.active::after{ background:url('../images/blt_down_on.png') 50% 50% no-repeat;}
#header .utill a.doc{ margin-left:50px;}
#header .utill a.doc::before{ content: ''; width: 15px; height: 15px; display: inline-block; background:url('../images/ic_doc.png') 50% 50% no-repeat; vertical-align: -2px; margin-right:10px;}
#header .utill a.sup{ margin-left:30px;}
#header .utill a.sup::before{ content: ''; width: 15px; height: 15px; display: inline-block; background:url('../images/ic_monitor.png') 50% 50% no-repeat; vertical-align: -2px; margin-right:10px;}
#header .lang{ display: inline-block; margin-left:10vw;}
#header .lang a{ position: relative; display: inline-block; font-size: 14px; color:#fff; text-transform: uppercase; opacity: .5; line-height: 40px; font-weight: 200;}
#header .lang a.active,
#header .lang a:hover{ opacity: 1;}
#header .lang a.active::after{ content:''; position: absolute; bottom:5px; left:0; width:100%; height:1px; background-color:#fff;}
#header .lang a + a{ margin-left:7px;}
#header.fixed{ background-color:rgba(15,73,219,.95);}
#wrap.w2 #header,
#wrap.w3 #header,
#wrap.w4 #header,
#wrap.w5 #header,
#wrap.w6 #header{ background-color:rgba(15,73,219,.95);}

#indexwrap{ position: relative; clear:both; z-index:1;}

#footer{ position: relative; z-index: 1; padding: 70px 0; background-color:#9ea1a9;}
#footer .bt-top{ width:54px; height: 54px; position: absolute; top:0; right:0; background:#9ea1a9 url('../images/bt_top.png') 50% 50% no-repeat; border:#fff 2px solid; box-shadow: 0 0 10px rgba(0,0,0,.2); border-radius:50%; text-indent: -9999px; text-align: left;}
#footer .footer-wrap{ max-width: 1200px; margin:0 auto; position: relative; padding:0 0 120px 210px; background:url('../images/footer_logo.png') 0 0 no-repeat;}
#footer .footer-lnk{ display: table; width:100%; table-layout: fixed;}
#footer .footer-lnk > li{ display: table-cell; vertical-align: top;}
#footer .footer-lnk > li.quick{ width:310px;}
#footer .footer-lnk > li.contact{ width:430px;}
#footer .footer-lnk > li > strong{ color:#fff; display: block; font-size:20px; font-weight:400;}
#footer .footer-lnk > li > ul{ margin-top:15px;}
#footer .footer-lnk > li > ul > li{ color:#d4d4d4; padding:3px 0;}
#footer .footer-lnk > li > ul > li a{ display: inline-block; color:#d4d4d4;}
#footer .footer-lnk > li > ul > li a:hover{ color:#fff; }
#footer .footer-lnk > li.quick > ul > li{ width:115px; float:left; }
#footer .footer-lnk > li > ul > li em{ color:#fefefe;}
#footer .footer-lnk > li.link > ul{ padding-top:30px;}
#footer .footer-inf{ border-top:#9699a0 1px solid; padding:40px 0 0 0;}
#footer .footer-inf p{ text-align: center;}
#footer .footer-inf .copy{ color:#fff;}
#footer .footer-inf .cmt{ font-size: 12px; color:#bbbdc3; margin-top:25px;}

.bt-mn{ position: fixed; top:0; left:0; width: 100px; height: 100vh; z-index: 3;}
.bt-mn::before{ content: ''; width: 1px; height: 100vh; background-color:rgba(255,255,255,.2); display: block; position: absolute; right: 0; top:0; transition:all 0.2s ease-in-out; }
/* 아이콘(14x20)만큼만 눌리면 터치로 맞히기 어렵다. 눌리는 영역을 44x44 로 넓히고
   막대 3개는 아래에서 같은 자리에 다시 앉힌다(보이는 모양은 그대로). */
.bt-mn > a{ width:44px; height: 44px; position: absolute; top:50%; left:50%; margin:-22px 0 0 -22px; display: block;}
.bt-mn > a span{ position: absolute; top:-9999px; left: -9999px;}
.bt-mn > a > i{ display: block; width:2px; height: 20px; background-color:#fff; position: absolute; top:50%; margin-top:-10px; transition:all 0.2s ease-in-out; }
.bt-mn > a > i:nth-child(1){ height: 14px; left:15px;}
.bt-mn > a > i:nth-child(2){ left:21px;}
.bt-mn > a > i:nth-child(3){ left:27px;}
.bt-mn > a:hover > i:nth-child(1){ height: 20px;}
.bt-mn > a:hover > i:nth-child(2){ height: 14px;}
#wrap.w2 .bt-mn::before,
#wrap.w3 .bt-mn::before,
#wrap.w6 .bt-mn::before{ background-color:rgba(0,0,0,.05);}
#wrap.w2 .bt-mn > a > i,
#wrap.w3 .bt-mn > a > i,
#wrap.w6 .bt-mn > a > i{ background-color:#2654c3; }

.bt-mn.color::before{ background-color:rgba(0,0,0,.05);}
.bt-mn.color > a > i{ background-color:#2654c3; }

#gnbWrap{ position: fixed; top:0; right:0;  width: 100px; height: 100vh; z-index: 3;}
#gnbWrap::before{ content: ''; width: 1px; height: 100vh; background-color:rgba(255,255,255,.2); display: block; position: absolute; left: 0; top:0;}
#gnb{ width:100vh; transform: rotate(90deg); margin-left:-45vh; margin-top:50vh; text-align: center;}
#gnb > li{ display: inline-block; padding:0 10px;}
#gnb > li > a{ position: relative; display: block; font-size: 12px; color: #fff; text-transform: uppercase; color: #7192e1;}
#gnb > li > a::after{ transition:all 0.2s ease-in-out; }
#gnb > li.active > a{ color: #fff;}
#gnb > li.active > a::after{ content: ''; width:100%; height: 1px; display: block; background-color:#fff; position: absolute; bottom:-39px; left:0;}
#wrap.w2 #gnbWrap::before,
#wrap.w3 #gnbWrap::before,
#wrap.w6 #gnbWrap::before{ background-color:rgba(0,0,0,.05);}
#wrap.w2 #gnb > li.active > a,
#wrap.w3 #gnb > li.active > a,
#wrap.w6 #gnb > li.active > a{ color: #2452c0;}
#wrap.w4 #gnb > li > a{ color: rgba(255,255,255,.5);}
#wrap.w4 #gnb > li.active > a{ color: rgba(255,255,255,1);}
#wrap.w2 #gnb > li.active > a::after,
#wrap.w3 #gnb > li.active > a::after,
#wrap.w6 #gnb > li.active > a::after{ background-color:#2452c0; }

#lm{ position: fixed; left:-100%; top:0; width:100%; height: 100vh; background-color:#0e49db; z-index: 4; transition:all 0.2s ease-in-out; } 
#lm.open{ left:0;}
#lm .inner{ height: 100vh;}
#lm .hd{ height: 100px; max-width: 1200px; margin:0 auto; position: relative;}
#lm .hd h1.logo{ position: absolute; top:30px; left:0; width:102px; text-align: left;}
#lm .hd h1.logo > a{ height:36px; text-indent: -9999px; display: block; background: url('../images/logo.png') 50% 50% no-repeat;}
#lm .hd .close{ position: absolute; top:33px; right: 0; width:33px; height: 33px; background:url('../images/bt_close.png') 50% 50% no-repeat; display: block; text-indent: -9999px;}
#lm .hd .close:hover{ transform: rotate(90deg);}
#lm .lang{ width:200px; margin:0 auto; text-align: center;}
/* ko/en/ja 가 17x18 남짓이라 손가락으로 구분해 누르기 어려웠다. 여백으로 히트 영역 확보 */
#lm .lang a{ font-size:14px; font-weight: 500; text-transform: uppercase; color:#fff; display:inline-block; padding:13px 12px;}
#lm .lang a:hover{ opacity:.6;}
#lm .lang a + a{ margin-left:0;}
#lm .menu{ max-width: 1200px; margin:60px auto 0; text-align: center; color: #fff;}
#lm .menu > li + li{ margin-top:40px;}
#lm .menu > li em { display: block; font-size: 56px; font-family: "GmarketSans", system-ui, sans-serif;  font-weight: 700;}

#lm .menu > li > ul{ margin-top:30px;}
#lm .menu > li > ul a{ font-size: 16px; color:#628bf1; display: block; padding:8px 0;}
#lm .menu > li > ul a:hover{ color:#fff;}
#lm .lnk{ text-align: center; display: table; width: 400px; margin: 70px auto 0;}
#lm .lnk a{ width:50%;  display: table-cell; line-height: 48px; border-top:#275cdf 1px solid; border-bottom:#275cdf 1px solid; color:#fff;}
#lm .lnk a + a{ border-left:#275cdf 1px solid; }
#lm .lnk a:hover{ background-color:rgba(255,255,255,.1)}

@media screen and (min-width:1024px) and (max-width:1280.98px){
    #wrap{ min-width:auto;}
}

/* 1024~1280px 는 사실상 태블릿이다 (iPad 가로 1180, 갤럭시탭 11" 가로 1280 등).
   좌우 100px 고정 레일(.bt-mn, #gnbWrap)이 본문 위를 덮고 탭을 가로채며
   #header 의 언어 선택이 오른쪽 경계에서 잘리므로 768~1023 과 같은 상단 햄버거로 통일한다. */
@media screen and (min-width:1024px) and (max-width:1280.98px){
    #header .inner{ height: 76px; border-bottom:rgba(255,255,255,.1) 1px solid;}
    #header .utill,
    #header .lang,
    #gnbWrap{ display: none;}
    #header h1.logo{ width:90px; top:20px; left:20px;}
    #header h1.logo > a{ height: 32px; background-size:90px auto;}
    .bt-mn{ height: 76px; width: 76px; top:0; right: 0; left: auto;}
    .bt-mn a{ transform: rotate(-90deg);}

    #lm .hd{ height: 76px;}
    #lm .hd h1.logo{ width:90px; top:20px; left:20px;}
    #lm .hd h1.logo > a{ height: 32px; background-size:90px auto;}
    #lm .hd .close{ width:44px; height: 44px; top:16px; right: 16px; background-size:23px auto; }
}

/* 태블릿 영상 구도. .video-bg 는 left:0 + 1920px 고정이라 834px 에서 57%, 1024px 에서 47% 가
   화면 밖으로 나갔다. 레일과 같은 기준으로 1280px 까지를 태블릿으로 보고 cover 로 바꾼다.
   1201px 이상 데스크탑 구도는 건드리지 않는다.
   폭 지정은 custom-*.js 의 videoResize() 가 인라인으로 찍으므로 그쪽에서도 1200px 이하는 비운다. */
@media screen and (min-width:768px) and (max-width:1280.98px){
    #indexwrap .intro .video-bg{ top:0; left:0; margin-top:0; width:100%; height:100%;}
    #indexwrap .intro .video-bg video{ position:absolute; top:0; left:0; width:100%; height:100%; min-width:0; min-height:0; object-fit:cover;}
}

@media screen and (min-width:768px) and (max-width:1023px){
    #wrap{ min-width:auto;}
    #header .inner{ height: 76px; border-bottom:rgba(255,255,255,.1) 1px solid;}
    #header .utill,
    #header .lang,
    #gnbWrap{ display: none;}
    #header h1.logo{ width:90px; top:20px; left:20px;}
    #header h1.logo > a{ height: 32px; background-size:90px auto;}
    .bt-mn{ height: 76px; width: 76px; top:0; right: 0; left: auto;}
    .bt-mn a{ transform: rotate(-90deg);}
    
    #footer{ padding:50px 0;}
    #footer .footer-wrap{ width:100%; padding:0 20px 20px 120px; background-size:70px auto; background-position:20px 0;}
    #footer .footer-lnk{ display: block;}
    #footer .footer-lnk > li{ display: block;}
    #footer .footer-lnk > li.quick,
    #footer .footer-lnk > li.contact{ width:100%; }
    #footer .footer-lnk > li.contact{ margin-top:30px;}
    #footer .footer-lnk > li > ul::after{ content: ''; clear: both; display: block; font-size: 0;}
    #footer .footer-lnk > li > ul{ margin-top:5px;}
    #footer .footer-lnk > li.quick > ul > li{ width: 50%;}
    #footer .footer-inf{ padding:40px 20px 0;}
    #footer .bt-top{ display: none;}
    
    #lm .hd{ height: 76px;}
    #lm .hd h1.logo{ width:90px; top:20px; left:20px;}
    #lm .hd h1.logo > a{ height: 32px; background-size:90px auto;}
    /* 아이콘 원본이 33x33 이라 23x23 박스에서는 잘려 있었다. 히트 영역 44, 보이는 크기 23 */
    #lm .hd .close{ width:44px; height: 44px; top:16px; right: 16px; background-size:23px auto; }
}

@media screen and (max-width:767.98px){
    #wrap{ min-width:auto;}
    #header .inner{ height: 76px; border-bottom:rgba(255,255,255,.1) 1px solid;}
    #header .utill,
    #header .lang,
    #gnbWrap{ display: none;}
    #header h1.logo{ width:90px; top:20px; left:20px;}
    #header h1.logo > a{ height: 32px; background-size:90px auto;}
    .bt-mn{ height: 76px; width: 76px; top:0; right: 0; left: auto;}
    .bt-mn a{ transform: rotate(-90deg);}
    
    .bt-mn.color > a > i{ background-color:#fff; }
    #wrap.w2 .bt-mn > a > i, #wrap.w3 .bt-mn > a > i, #wrap.w6 .bt-mn > a > i{ background-color: #fff;}
    
    #footer{ padding:50px 0;}
    #footer .footer-wrap{ width:100%; padding:0 20px 20px 120px; background-size:70px auto; background-position:20px 0;}
    #footer .footer-lnk{ display: block;}
    #footer .footer-lnk > li{ display: block;}
    #footer .footer-lnk > li > strong{ font-size:14px;}
    #footer .footer-lnk > li.quick,
    #footer .footer-lnk > li.contact{ width:100%; }
    #footer .footer-lnk > li.contact{ margin-top:30px;}
    #footer .footer-lnk > li > ul::after{ content: ''; clear: both; display: block; font-size: 0;}
    #footer .footer-lnk > li > ul > li{ font-size: 12px;}
    #footer .footer-lnk > li > ul{ margin-top:5px;}
    #footer .footer-lnk > li.quick > ul > li{ width: 50%;}
    #footer .footer-inf{ font-size: 12px; padding:40px 20px 0;}
    #footer .bt-top{ width: 40px; height: 40px; top:-70px; right:50%; margin-right: -20px;}
    
    #lm .hd{ height: 76px;}
    #lm .hd h1.logo{ width:90px; top:20px; left:20px;}
    #lm .hd h1.logo > a{ height: 32px; background-size:90px auto;}
    /* 아이콘 원본이 33x33 이라 23x23 박스에서는 잘려 있었다. 히트 영역 44, 보이는 크기 23 */
    #lm .hd .close{ width:44px; height: 44px; top:16px; right: 16px; background-size:23px auto; }
    #lm .lang a{ font-size: 12px;}
    #lm .menu{ margin-top:30px;}
    #lm .menu > li + li{ margin-top:20px;}
    #lm .menu > li em{ font-size: 28px;}
    #lm .menu > li > ul{ margin-top:15px;}
    #lm .menu > li > ul a{ font-size: 12px; padding:11px 0;}
    #lm .lnk{ width:260px;}
    #lm .lnk { margin-top:35px;}
    #lm .lnk a{ height: 39px; line-height: 37px; font-size: 13px;}
    
}

/* common */
.pager{ position: absolute; width: 100%; left:0; z-index: 4;}
.pager .swiper-pagination-bullet{ display: inline-block; width: 6px; height: 6px; border-radius: 50%; border:#a1a1a1 1px solid; background-color:transparent; opacity: 1;}
.pager .swiper-pagination-bullet + .swiper-pagination-bullet{ margin-left:6px;}
.pager .swiper-pagination-bullet.swiper-pagination-bullet-active{ border-color:#2352bf; background-color:#2352bf;}
.swiper-container-3d .swiper-slide-shadow-left{ display: none;}
.swiper-container-3d .swiper-slide-shadow-right{ display: none;}


.f-eng{ font-family: "GmarketSans", system-ui, sans-serif;font-weight: 500;}

.opacity{ opacity: 0;}
/* JS(aniEff)가 어떤 이유로든 노출 처리를 못 했을 때 내용이 사라지지 않도록 하는 안전망.
   터치 기기는 스크롤 등장 효과를 쓰지 않으므로 처음부터 보이게 한다. */
@media (hover: none){ .opacity{ opacity: 1;} }

@media screen and (max-width:767.98px){
    .main-tit{ font-size: 11px; margin-bottom:40px;}
}

/* index */
#indexwrap .fp-scroller{ padding:50px 0;}
#indexwrap .section .inner{ padding:50px 0;}

/* 배경은 영상(main.mp4)의 첫 프레임 스틸. 로딩 중에도 같은 장면이 보여서 영상 시작을 알아챌 수 없다.
   (기존 main_visual.jpg 파란 일러스트는 영상과 장면이 달라 로딩 후 화면이 확 바뀌어 보였다) */
#indexwrap .intro{ background:#131735 url('../images/main_visual_still.jpg') 50% 50% no-repeat; background-size:cover;}
#indexwrap .intro .desc{ position: relative; max-width: 1200px; margin:0 auto; color:#fff; z-index:2;}
/* 4.17vw = 1200px에서 50px. 1281px 이상은 상한에 걸려 기존과 동일. 앞의 px 는 clamp 미지원(IE) 폴백 */
#indexwrap .intro .desc .tx01{ font-size:50px; font-size:clamp(36px, 4.17vw, 50px); }
/*#indexwrap .intro .desc .tx01{ font-size:54px; }*/
#indexwrap .intro .desc .tx01 span{ display: block; font-weight: 200; line-height: 1.2;}
/* 8.34vw = 1200px에서 100px(상한). 1281px 이상 데스크탑은 기존과 동일 */
#indexwrap .intro .desc .tx02{ font-size:100px; font-size:clamp(64px, 8.34vw, 100px); font-weight:700; font-family: "GmarketSans", system-ui, sans-serif; letter-spacing: .2em; margin:25px 0;}
#indexwrap .intro .desc .tx03 span{ display: block; font-size: 20px; color: #cdd4f5; margin-top: 15px;}
#indexwrap .intro .desc .bt-area{ margin-top:100px;}
#indexwrap .intro .desc .bt-area a{ display: inline-block; width:200px; height: 55px; line-height: 53px; border:rgba(255,255,255,.2) 1px solid; border-radius: 5px; text-align: center; color: #fff;}
#indexwrap .intro .desc .bt-area a:hover,
#indexwrap .intro .desc .bt-area a.active{ border-color:#15154b; background-color:#15154b; }
/*#indexwrap .intro .video-bg{ position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; }
#indexwrap .intro .video-bg video{ min-width:100%; min-height:100%; object-fit: cover;}*/
#indexwrap .intro .video-bg{ position:absolute; overflow:hidden; top:50%; left:0; margin-top:-540px; width:1920px; height:1080px; }
#indexwrap .intro .video-bg video{ position:absolute; left:0;  min-width:100%; min-height:100%; object-fit: cover;}
#indexwrap .intro .fp-tableCell{ overflow:hidden;}

.main-tit{ text-align: center; margin-bottom:80px; color: #1f3ec2; font-size: 14px; text-transform: uppercase; letter-spacing: .2em;}

.index01{ z-index:2; background-color:#fff;}
/* 1600px 를 고정폭으로 두면 태블릿(1024~1200px)과 좁은 데스크탑(1200~1600px)에서
   #wrap{overflow:hidden} 에 잘려 본문이 통째로 사라진다. 최대폭으로만 제한한다. */
.index01 .inbx{ max-width: 1600px; width:100%; margin:0 auto; display: table; table-layout: fixed;}
.index01 .inbx > *{ display: table-cell; vertical-align: top;}
.index01 .thumb{ position: relative;}
.index01 .thumb::before{ content: ''; position: absolute; top:0; left:0; height: 100%; bottom:0; right:0; width: 100%; background-color:rgba(0,0,0,.15);}
.index01 .thumb .play{ display: inline-block; position: absolute; top:50%; left: 50%; color: #bb0b0b; font-size: 12px; text-transform: uppercase; width: 100px; margin:-55px 0 0 -50px; font-size: 12px; font-weight: 600; text-align: center;}
.index01 .thumb .play::before{ content: ''; width:70px; height: 70px; display: block; background:url('../images/ic_play.png') 50% 50% no-repeat; margin:0 auto 18px;}
.index01 .thumb .play:hover{ opacity: .8;}
.index01 .desc{ padding-left:10vw;}
.index01 .desc .tx01{ font-size: 40px; color:#111; font-weight: 200;}
.index01 .desc .tx01 span{ display: block;}
.index01 .desc .tx01 strong{ display: inline-block; position: relative;}
.index01 .desc .tx01 strong::before{ content: ''; width:100%; height: 1px; display: block; background-color:#111; position: absolute; bottom:0.2em; left:0;}
.index01 .desc .tx02{ font-size: 22px; color:#a6a6a6; margin-top:40px; }
.index01 .desc .tx02 span{ display: block;}
.index01 .desc .tx02 span em{ color:#2452c0;}
.index01 .tx-slide{ position: relative; margin-top:100px; width: 450px; padding-top:50px;}
.index01 .tx-slide .hd{ font-size: 40px; color:#2452c0;}
.index01 .tx-slide .txt{ font-size: 16px; margin-top:35px; }
.index01 .tx-slide .txt span{ display: block;}
.index01 .tx-slide .txt em{ color:#2452c0;}
.index01 .tx-slide .side-bx{ overflow: hidden;}
.index01 .tx-slide .pager{ position: absolute; width: 100%; top:-40px; left:0; bottom: auto; padding: 0; text-align: left;}

.index02{ background-color:#f8f8f8;}
.index02 .inbx{ max-width:1200px; margin:0 auto;}
.index02 .inbx::after{ content: ''; clear: both; display: block; font-size: 0;}
.index02 .inbx .desc{ float: left; width: 600px; height: 300px; color:#111; font-size:22px;}
.index02 .inbx .desc .hd{ font-size: 40px; margin-bottom:30px;}
.index02 .inbx .desc .bd{ color:#757575;}
.index02 .inbx .desc span{ display: block; line-height: 1.2;}
.index02 .inbx .desc strong{ display: inline-block; position: relative;}
.index02 .inbx .desc strong::before{ content: ''; width:100%; height: 1px; background-color:#111; position: absolute; bottom:0.2em; left:0;}
.index02 .inbx .item{ float: left; width: 300px; height: 300px; position: relative; background-color:#fff; cursor: pointer;}
.index02 .inbx .item.pc{ width:300px !important;}
.index02 .inbx .item .bx{ position: absolute; top:0; left:0;  width:100%; height: 300px; padding:150px 30px 0 50px; transition:all 0.2s ease-in-out; }
.index02 .inbx .item .bx::before{ content: ''; width:70px; height: 66px; position: absolute; top:50px; left:50px; display: block; background-position: 0 0; background-repeat:no-repeat;}
.index02 .inbx .item.item2 .bx,
.index02 .inbx .item.item6 .bx{ left:auto; right:0; }
.index02 .inbx .item.item1 .bx::before{ background-image:url('../images/ic_m0301.png');}
.index02 .inbx .item.item2 .bx::before{ background-image:url('../images/ic_m0302.png');}
.index02 .inbx .item.item3 .bx::before{ background-image:url('../images/ic_m0303.png');}
.index02 .inbx .item.item4 .bx::before{ background-image:url('../images/ic_m0304.png');}
.index02 .inbx .item.item5 .bx::before{ background-image:url('../images/ic_m0305.png');}
.index02 .inbx .item.item6 .bx::before{ background-image:url('../images/ic_m0306.png');}
.index02 .inbx .item.item7 .bx::before{ background-image:url('../images/ic_m0307.png');}
.index02 .inbx .item.item8 .bx::before{ background-image:url('../images/ic_m0308.png');}
.index02 .inbx .item.item9 .bx::before{ background-image:url('../images/ic_m0309.png');}
.index02 .inbx .item.item1.active .bx::before{ background-image:url('../images/ic_m0301_on.png');}
.index02 .inbx .item.item2.active .bx::before{ background-image:url('../images/ic_m0302_on.png');}
.index02 .inbx .item.item3.active .bx::before{ background-image:url('../images/ic_m0303_on.png');}
.index02 .inbx .item.item4.active .bx::before{ background-image:url('../images/ic_m0304_on.png');}
.index02 .inbx .item.item5.active .bx::before{ background-image:url('../images/ic_m0305_on.png');}
.index02 .inbx .item.item6.active .bx::before{ background-image:url('../images/ic_m0306_on.png');}
.index02 .inbx .item.item7.active .bx::before{ background-image:url('../images/ic_m0307_on.png');}
.index02 .inbx .item.item8.active .bx::before{ background-image:url('../images/ic_m0308_on.png');}
.index02 .inbx .item.item9.active .bx::before{ background-image:url('../images/ic_m0309_on.png');}
.index02 .inbx .item .tx01{ font-size: 20px; color:#111; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; }
.index02 .inbx .item .tx02{ font-size: 16px; color:#414141; margin-top:10px; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; max-height: 46px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.index02 .inbx .item .close{ position: absolute; width: 20px; height: 20px; display: block; top:44px; right:50px; display: none;}
.index02 .inbx .item .close::before{ content: ''; width:20px; height: 4px; background-color:#fff; position: absolute; top:50%; left:0; display: block; margin-top:-2px;}
.index02 .inbx .item .close span{ position: absolute; top:-9999px; left:-9999px;}
.index02 .inbx .item.active{ z-index: 1;}
.index02 .inbx .item.active .bx{ width:600px; background-color:#125ad3;}
.index02 .inbx .item.active .tx01{ color:#fff; }
.index02 .inbx .item.active .tx02{ max-height: none; display: -webkit-box; -webkit-line-clamp: 5; padding-right:50px; color:#dee4f7;}
.index02 .inbx .item.active .close{ display: block;}
.index02 .inbx .fea-lst .pager{ display: none;}
.index02 .inbx .fea-lst .swiper-wrapper,
.index02 .inbx .fea-lst .wrp{ display: inline;}

.index03{ background-color:#0198f8;}
.index03 .main-tit{ color:#fff;}
/* 3.4vw = 1176px에서 40px(상한). 1281px 이상 데스크탑은 기존과 동일. 앞의 px 는 clamp 미지원(IE) 폴백 */
.index03 .desc{ font-size:40px; font-size:clamp(26px, 3.4vw, 40px); text-align: center; color:#fff; font-weight: 200;}
.index03 .desc span{ display: block;}
.index03 .desc strong{ position: relative; display: inline-block; font-weight: 400;}
.index03 .desc strong::before{ content: ''; width:100%; height: 1px; background-color:#fff; display: block; position: absolute; bottom:0.2em; left:0;}
.index03 .pref-bx{ position: relative; max-width: 1200px; margin:70px auto 0; height: 584px; padding:0 0 74px 0;}
.index03 .pref-bx.ie{ overflow: hidden;}
.index03 .pref-bx::after{ content: ''; width:150px; height: 74px; display: block; background:url('../images/img_monitor.png'); position: absolute; bottom: 0; left: 50%; margin:0 0 0 -75px;}
.index03 .pref-bx > a.ctr{ position: absolute; width:50px; height: 50px; background-color:#fff; border:#cfdcf2 1px solid; background-position: 50% 50%; background-repeat: no-repeat; border-radius:50%; top:230px; left:50%; right: auto; margin:0 0 0 -300px; display: block; z-index: 3;}
.index03 .pref-bx > a.ctr:hover{ background-position: 50% 50%; border-color:#175ed4; box-shadow: 0 0 10px rgba(0,0,0,.1);}
.index03 .pref-bx > a.ctr.prev{ margin:0 0 0 -300px; background-image:url('../images/bt_prev.png'); }
.index03 .pref-bx > a.ctr.next{ margin:0 0 0 250px; background-image:url('../images/bt_next.png'); }
.index03 .pref-bx .side-bx{ position: relative;  z-index: 2;}
.index03 .pref-bx .item::after{ content: ''; position: absolute; top: 376px; left:50%; margin-left:-380px; width:760px; height: 1px; background-color:#e9eaeb;}
.index03 .pref-bx .item::before{ content: ''; position: absolute; top: 376px; left:50%; margin-left:-455px; width:910px; height: 1px; background-color:#fff;}
.index03 .pref-bx .item .bx{ width:760px; height: 510px; background-color:#fff; border-radius: 20px; margin:0 auto; padding:120px 0 0 0;}
.index03 .pref-bx .item .bx .hd{ font-size: 30px; color:#111; text-align: center;}
.index03 .pref-bx .item .bx .bd{ font-size: 16px; text-align: center; margin:50px 0 0 0;}
.index03 .pref-bx .item .bx .bd span{ display: block; text-align: center; color: #111;}
.index03 .pref-bx .item .bx .bd .thum{ width:270px; margin:0 auto 75px;}
.index03 .pref-bx .pager{ position: absolute; top:60px; bottom: auto; text-align: center; }
.index03 .pref-bx .pager .swiper-pagination-bullet{ border-color:#e3e3e3; background-color:#e3e3e3;}
.index03 .pref-bx .pager .swiper-pagination-bullet.swiper-pagination-bullet-active{ border-color:#2352bf; background-color:#2352bf;}
.index03 .pref-bx .item .prev{ padding-top:50px; top:302px; width:146px; height: 146px; border:#fff 1px solid; left:0; border-radius: 50%; position: absolute; display: block; text-align: center; color: #fff; font-size: 16px;}
.index03 .pref-bx .item .next{ padding-top:50px; top:302px; width:146px; height: 146px; border:#fff 1px solid; right:0; border-radius: 50%; position: absolute; display: block; text-align: center; color: #fff; font-size: 16px;}

.index04{ background-color:#090e17;}
.index04 .main-tit{ color:#fff;}
.index04 .inbx{ max-width: 1680px; margin:0 auto;}
.index04 .desc{ text-align: center; color:#fff;}
.index04 .desc .tx01{ font-size: 40px; font-weight: 200;}
.index04 .desc .tx01 span{ display: block;}
.index04 .desc .tx01 strong{ position: relative; display: inline-block; font-weight: 400;}
.index04 .desc .tx01 strong::before{ content: ''; width:100%; height: 1px; background-color:#fff; display: block; position: absolute; bottom:0.2em; left:0;}
.index04 .desc .tx02{ margin-top:50px; font-size: 16px; color:#878a8e;}
.index04 .auto-bx{ position: relative; width: 100%; margin-top:80px;}
.index04 .auto-bx .side-bx{ overflow: hidden;}
.index04 .auto-bx .item{ width: 580px; padding:0 30px;}
.index04 .auto-bx .item a{ position: relative; display: block; height: 340px; padding: 50px 60px; background-position:50% 50%; background-size:cover; overflow: hidden; }
.index04 .auto-bx .item a::after{ content: ''; position: absolute; bottom:55px; right: 50px; width:60px; height: 60px; background:url('../images/ic_go.png') 50% 50% no-repeat; border:rgba(255,255,255,.4) 1px solid; border-radius:50%; display: block; transition:all 0.2s ease-in-out; }
.index04 .auto-bx .item a::before{ content: ''; width:100%; position: absolute; z-index: -1; top:0; left: 0; height: 100%; display: block; transition:all 0.2s ease-in-out; }
.index04 .auto-bx .item a:hover::before{ transform:scale(1.1); }
.index04 .auto-bx .item a:hover::after{ background-color:rgba(255,255,255,.4);}
.index04 .auto-bx .item.item1 a::before{ background-image: url('../images/main_bg0401.png');}
.index04 .auto-bx .item.item2 a::before{ background-image: url('../images/main_bg0402.png');}
.index04 .auto-bx .item.item3 a::before{ background-image: url('../images/main_bg0403.png');}
.index04 .auto-bx .item.item4 a::before{ background-image: url('../images/main_bg0404.png');}
.index04 .auto-bx .item.item5 a::before{ background-image: url('../images/main_bg0405.png');}
.index04 .auto-bx .item.item6 a::before{ background-image: url('../images/main_bg0406.png');}
.index04 .auto-bx .item .hd{ display: block; font-size: 30px; color:#fff;}
.index04 .auto-bx .item .hd em{ display: block; line-height: 1.2;}
.index04 .auto-bx .item .bd{ margin-top:25px; color:#fff; font-size:16px; display: block;}
.index04 .auto-bx .pager{ position: relative; bottom:auto; margin-top:40px; text-align: center;}
.index04 .auto-bx .pager .swiper-pagination-bullet{ border-color:#fff; background-color:#fff;}
.index04 .auto-bx .pager .swiper-pagination-bullet.swiper-pagination-bullet-active{  border-color:#2352bf; background-color:#2352bf;}

#indexwrap .index05.section .inner{ padding-bottom:0;}
.index05{ background-color:#f7f7f7;}
#indexwrap .index05 .fp-scroller{ padding-bottom:0;}
.index05 .inbx{ max-width: 1200px; margin:0 auto; padding:0 0 80px 0;}
.index05 .desc{ font-size: 40px; color: #111; text-align: center; margin-bottom: 40px;}
.index05 .part-bx{ position: relative; padding-bottom:40px;}
.index05 .part-bx::after{ content: ''; clear: both; display: block; font-size: 0;}
.index05 .part-bx .side-bx{ overflow: hidden;}
.index05 .part-bx .side-bx ul{ margin-left:-20px; overflow: hidden;}
.index05 .part-bx .side-bx ul li img{ transition:all 0.2s ease-in-out;}
.index05 .part-bx .side-bx ul li:hover img{transform:scale(1.1); opacity: .8; }
.index05 .part-bx .copr{ width:224px; height: 224px; float: left; margin:10px 0 10px 20px; background-color:#fff; padding:40px 0 0 0;}
.index05 .part-bx .copr span{ display: block; text-align: center; color:#111;}
.index05 .part-bx .copr .logo img{ display: inline;}
.index05 .part-bx .pager{ position: relative; bottom:auto; margin-top:40px; text-align: center;}

@media screen and (max-width:1680px){
    .index04 .inbx{ max-width: 100%; width: 100%; }
}

@media screen and (min-width:1024px) and (max-width:1280.98px){
    /* 76px 고정 헤더가 세로 중앙정렬된 인트로 첫 줄을 덮지 않도록 그만큼 내린다 */
    #indexwrap .intro .desc{ padding:76px 50px 0;}
    
    .index01 .inbx{ padding:0 50px;}
    /* PC 구도(썸네일이 절반)를 유지한다. 30%면 썸네일이 조그매져 텍스트와 동떨어져 보인다.
       썸네일은 옆 텍스트 컬럼(테이블 행) 높이를 꽉 채우고 넘치는 구도는 cover 로 자른다 */
    .index01 .movie{ width:45%; position:relative;}
    .index01 .thumb{ position:absolute; top:0; left:0; width:100%; height:100%;}
    .index01 .thumb img{ width:100%; height:100%; object-fit:cover;}
    .index01 .desc{ width:55%; padding-left:40px;}
    .index01 .tx-slide{ width:100%;}
    
    .index02 .inbx{ padding:0 50px;}
    /* PC 의 1200px 고정 그리드(desc 600 + 카드 300x4열)를 %로 환산해 같은 줄 구성을 유지한다.
       item2/item6 은 "우측 끝 열" 전제로 right:0 + 왼쪽 확장이 하드코딩되어 있어서,
       그리드가 밀려 줄바꿈이 달라지면 터치 시 확장 카드가 화면 왼쪽 밖으로 나갔다 */
    .index02 .inbx .desc{ width:50%;}
    .index02 .inbx .item{ width:25%;}
    .index02 .inbx .item.pc{ width:25% !important;}
    .index02 .inbx .item .bx{ padding-left:30px; padding-right:20px;}
    .index02 .inbx .item .bx::before{ left:30px;}
    .index02 .inbx .item .tx01{ font-size:17px;}
    .index02 .inbx .item .tx02{ font-size:14px;}
    .index02 .inbx .item.active .bx{ width:200%;}
    
    .index03 .pref-bx .item .next,
    .index03 .pref-bx .item .prev,
    .index03 .pref-bx .item::before{ display: none;}
    
    .index05 .inbx{ padding:0 50px 80px;}
    .index05 .part-bx .side-bx ul{ margin-left:-2%;}
    .index05 .part-bx .copr{ width:18%; margin-left:2%;}
    
    #footer .footer-wrap{ background-position: 20px 0; padding: 0 0 120px 180px;}
    #footer .footer-lnk > li.quick{ width:30%;}
    #footer .footer-lnk > li.contact{ width:50%;}
}

@media screen and (min-width:768px) and (max-width:1023px){
    
    #indexwrap .section .inner{ padding:30px 0;}
    
    /* 76px 고정 헤더가 세로 중앙정렬된 인트로 첫 줄을 덮지 않도록 그만큼 내린다 */
    #indexwrap .intro .desc{ padding:76px 30px 0;}
    #indexwrap .intro .desc .bt-area a{ background-color:#0d43de;}    
    
    .index01 .inbx{ width: 100%; display: block; padding:0 30px;}
    .index01 .inbx > *{ display: block; width: 100%;}
    .index01 .desc{ padding:0; margin-top:50px;}
    .index01 .desc .tx02{ margin-top:20px; padding-top:0;}
    .index01 .tx-slide{ width: 100%; margin-top:50px;}
    
    .index02 .inbx{ padding:0 30px;}
    .index02 .inbx .desc{ float: none; width: 100%; height: auto; margin-bottom:50px;}
    .index02 .inbx .desc .hd{ margin-bottom:15px;}
    .index02 .inbx .item{ width: 100%; height: auto; float: none;background-color:#fff;}
    .index02 .inbx .item .bx{ position: relative; width:100%; height: 300px; background-color:transparent;}
    .index02 .inbx .fea-lst{ position: relative; overflow: hidden;}
    .index02 .inbx .fea-lst .pager{ display: block; position: relative; margin-top:10px; text-align: center;}
    .index02 .inbx .fea-lst .swiper-wrapper,
    .index02 .inbx .fea-lst .wrp{ display: flex;}
    .index02 .inbx .item.active{ z-index: 1;}
    .index02 .inbx .item.active .bx{ width:100%; background-color:transparent;}
    .index02 .inbx .item.active .tx01{ color: inherit; }
    .index02 .inbx .item.active .tx02{ color: inherit; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; max-height: 42px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .index02 .inbx .item.active .close{ display: none;}
    
    .index03 .inbx{ padding:0 20px;}
    /* 받침대(::after 74px)가 하단 패딩 영역에 그려지므로 패딩을 없애면 카드(510px)가 받침대를 덮는다.
       (큐브 시절엔 카드가 축소 렌더되는 버그 때문에 우연히 보였던 것) */
    .index03 .pref-bx{ margin-top:30px; padding:0 0 74px 0; height:584px;}
    .index03 .pref-bx .item::before{ display: none;}
    .index03 .pref-bx .item::after{ width:100%; margin-left:-50%;}
    .index03 .pref-bx .item .bx{ width:100%; }
    .index03 .pref-bx .item .bx .bd{ padding:0 20px;}
    .index03 .pref-bx .item .prev,
    .index03 .pref-bx .item .next{ display: none;}
    
    .index04 .inbx{ padding:0 30px;}
    .index04 .auto-bx{ margin-top:40px;}
    .index04 .auto-bx .item{ padding:0 30px;}
    .index04 .auto-bx .item a::after{ width:40px; height: 40px; background-size:10px auto; bottom:35px; right: 25px;}
    
    #indexwrap .index05.section .inner{ padding-bottom:0;}
    .index05 .inbx{ padding:0 30px;}
    .index05 .part-bx .side-bx ul{ margin-left:-3.33%; overflow: hidden;}
    .index05 .part-bx .item .copr{ width:30%; height: 140px; margin:0 0 3.33% 3.33%; padding-top:26px;}
    .index05 .part-bx .item .copr .name{ display: none;}
    .index05 .part-bx .pager{ margin-top:20px;}
}

@media screen and (max-width:767.98px){
    
    #indexwrap .section .inner{ padding:30px 0;}
    
    #indexwrap .intro{ background: #1e2140 url('../images/main_visual_m.jpg') 50% 50% no-repeat; background-size: cover;}
    #indexwrap .intro .desc{ padding:0 20px;}
    #indexwrap .intro .desc .tx01{ font-size: 38px;}
    #indexwrap .intro .desc .tx02{ font-size: 70px; margin:10px 0;}
    #indexwrap .intro .desc .tx03 strong{ font-size: 12px;}
    #indexwrap .intro .desc .tx03 span{ font-size: 15px;}
    #indexwrap .intro .desc .bt-area{ margin-top:50px;}
    #indexwrap .intro .desc .bt-area a{ height: 40px; line-height: 40px; width: 44%;}    
    #indexwrap .intro .video-bg{ display: none;}
    
    .index01 .inbx{ width: 100%; display: block; padding:0 20px;}
    .index01 .inbx > *{ display: block; width: 100%;}
    .index01 .desc{ padding:0; margin-top:50px;}
    .index01 .desc .tx01{ font-size: 28px;}
    .index01 .desc .tx02{ font-size: 15px; margin-top:20px; padding-top:0;}
    .index01 .tx-slide{ width: 100%; margin-top:50px;}
    .index01 .tx-slide .hd{ font-size: 28px;}
    .index01 .tx-slide .txt{ font-size: 12px; margin-top:10px;}
    .index01 .thumb .play{ font-size: 6px; margin-top:-28px;}
    .index01 .thumb .play::before{ width:35px; height: 35px; background-size:35px;}
    
    .index02 .inbx{ padding:0 20px;}
    .index02 .inbx .desc{ font-size: 15px; float: none; width: 100%; height: auto; margin-bottom:50px;}
    .index02 .inbx .desc .hd{ font-size: 28px; margin-bottom:15px;}
    .index02 .inbx .item{ width: 100%; height: auto; float: none;background-color:#fff;}
    .index02 .inbx .item .bx{ position: relative; width:100%; padding:75px 20px 25px; height: auto; background-color:transparent;}
    .index02 .inbx .item .bx::before{ width:36px; height: 36px; top:25px; left: 20px; background-size:100% auto;}
    .index02 .inbx .fea-lst{ position: relative; overflow: hidden;}
    .index02 .inbx .fea-lst .pager{ display: block; position: relative; margin-top:10px; text-align: center;}
    .index02 .inbx .fea-lst .swiper-wrapper,
    .index02 .inbx .fea-lst .wrp{ display: flex;}
    .index02 .inbx .item.active{ z-index: 1;}
    .index02 .inbx .item.active .bx{ width:100%; background-color:transparent;}
    .index02 .inbx .item.active .tx01{ color: inherit; }
    .index02 .inbx .item.active .tx02{ color: inherit; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; max-height: 42px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .index02 .inbx .item.active .close{ display: none;}
    
    .index03 .desc{ font-size: 28px;}
    .index03 .inbx{ padding:0 20px;}
    .index03 .pref-bx{ margin-top:30px; padding:0; height: 330px;}
    .index03 .pref-bx::after,
    .index03 .pref-bx .item::before{ display: none;}
    .index03 .pref-bx .item::after{ top:225px; width:100%; margin-left:-50%;}
    .index03 .pref-bx .item .bx{ width:100%; padding-top:80px; height: 330px;}
    .index03 .pref-bx .item .bx .hd{ font-size: 20px;}
    .index03 .pref-bx .item .bx .bd .thum{ width: 110px; margin:0 auto 30px;}
    .index03 .pref-bx .item .bx .bd{ font-size: 12px; padding:0 20px;}
    .index03 .pref-bx .item .prev,
    .index03 .pref-bx .item .next{ display: none;}
    
    .index04 .inbx{ padding:0 20px;}
    .index04 .desc .tx01{ font-size: 28px;}
    .index04 .desc .tx02{ font-size: 14px; margin-top:20px;}
    .index04 .auto-bx{ margin-top:40px;}
    .index04 .auto-bx .item{ width: 100%; padding:0;}
    .index04 .auto-bx .item a{ padding:30px 80px 30px 25px; height: 210px;}
    .index04 .auto-bx .item .hd{ font-size: 20px;}
    .index04 .auto-bx .item .bd{ font-size: 12px; margin-top:20px;}
    .index04 .auto-bx .item a::after{ width:40px; height: 40px; background-size:10px auto; bottom:35px; right: 25px;}
    
    #indexwrap .index05.section .inner{ padding-bottom:0;}
    .index05 .inbx{ padding:0 20px;}
    .index05 .desc{ font-size: 28px; margin-bottom: 20px;}
    .index05 .part-bx{ padding-bottom:30px;}
    .index05 .part-bx .side-bx ul{ margin-left:-3.33%; overflow: hidden;}
    .index05 .part-bx .item .copr{ width:30%; height: 100px; margin:0 0 3.33% 3.33%; padding-top:26px;}
    .index05 .part-bx .item .copr .name{ display: none;}
    .index05 .part-bx .pager{ margin-top:20px;}
}

/* common */
.breadcrumb{ font-size: 14px; color:#fff; font-weight: 200;}
.breadcrumb .pc{ display: block;}
.breadcrumb .mobile{ display: none;}
.breadcrumb .home{ text-transform: uppercase;}
.breadcrumb a,
.breadcrumb span,
.breadcrumb strong{ position: relative; display: inline-block; color: #fff;}
.breadcrumb a + a,
.breadcrumb span + span,
.breadcrumb a + strong,
.breadcrumb span + strong{ margin-left:10px; padding-left:14px;}
.breadcrumb strong{ font-weight: 400;}
.breadcrumb a + a::before,
.breadcrumb span + span::before,
.breadcrumb a + strong::before,
.breadcrumb span + strong::before{ content: ''; width:6px; height: 6px; display: block; position: absolute; top:50%; left:0; margin-top:-3px; border-top:#fff 1px solid; border-right: #fff 1px solid; transform: rotate(45deg);}

.sub-vis{ background-color:#0e49db; background:url('../images/sub_img_bg.jpg') 100% 100%;}
.sub-vis .inbx{ position: relative; padding:180px 0 0 0; height: 600px; max-width: 1200px; margin:0 auto;}
.sub-vis .sub-tit{ position: relative; font-size: 66px; color:#fff; margin-top:80px; z-index: 1;}
.sub-vis .copy{ font-size: 32px; color:#fff; margin-top:30px; font-weight: 200;position: relative;z-index: 1;}
.sub-vis .copy span{ display: block;}
.sub-vis.down .img{ position: absolute; top:180px; right: 90px; width: 336px; height: 374px; display: block; background:url('../images/img_down.png'); background-size: 100% auto;}
.sub-vis.pricing .img{ position: absolute; top:130px; right: 64px; width: 450px; height: 414px; display: block; background:url('../images/img_pricing.png'); background-size: 100% auto;}
.sub-vis.license .img{ position: absolute; top:180px; right: 90px; width: 336px; height: 374px; display: block; background:url('../images/img_license.png'); background-size: 100% auto;}
.sub-vis.about .img{ position: absolute; top:180px; right: 90px; width: 336px; height: 374px; display: block; background:url('../images/img_about.png'); background-size: 100% auto;}
.sub-vis.release .img{ position: absolute; top:180px; right: 90px; width: 336px; height: 374px; display: block; background:url('../images/img_release.png'); background-size: 100% auto;}

.s-content .inner{ max-width: 1200px; margin:0 auto; padding:100px 0;}

.mob{ display: none;}

.layPop{ display: none; width: 800px; background-color:#fff; border-radius: 10px;}
.layPop .pop-tit{ height: 80px; line-height: 80px; padding:0 90px 0 35px; border-bottom:#ebebeb 1px solid; color:#111; border-radius: 10px 10px 0 0; font-size: 18px; font-weight: 400; background-color:#f3f3f3;}
.layPop .pop-tit em{ font-weight: 600;}
.layPop .pop-tit2{ margin-bottom:20px; font-size: 26px; color:#111; font-weight: 200; }
.layPop .pop-tit2 em{ font-weight: 400;}
.layPop .pop-con{ padding:50px 40px;}
.layPop .bt-close{ position: absolute; top:20px; right:40px; width:40px; height: 40px; border:#c3d2ed 2px solid; border-radius:50%; display: block; background:url('../images/blt_x.png') 50% 50% no-repeat;}
.layPop .bt-close:hover{ background-color:#c3d2ed;}
.layPop .bt-close span{ position: absolute; top:-9999px; left:-9999px;}
.layPop .reg-bx .dv-row{ display: table; width: 100%;}
.layPop .reg-bx .dv-row + .dv-row{ margin-top:5px;}
.layPop .reg-bx .dv-row > *{ display: table-cell; line-height: 46px;}
.layPop .reg-bx .dv-row .hd{ width: 100px; font-size: 16px; color:#111;}
.layPop .reg-bx .dv-row .hd::before{ content: ''; width: 3px; height: 3px; background-color:#e1e1e1; display: inline-block; border-radius: 50%; margin-right: 10px; vertical-align: 2px;}
.layPop .reg-bx .dv-row .input{ width: 340px;}
.layPop .reg-bx .dv-row .help-tx{ font-size: 14px; color:#111; display: inline-block;}
.layPop .dv-chk{ margin-top:30px; position: relative;}
.layPop .dv-chk label{ color:#111; margin-right:40px;}
.layPop .dv-chk label::before{ margin-right: 20px;}
.layPop .cmt{ margin:40px 0 25px; color:#a3a3a3;}
.layPop .cmt::before{ content: ''; width: 10px; height: 7px; background:url('../images/blt_dot.png') 50% 50% no-repeat; display: inline-block; vertical-align: middle; margin-right: 10px;}
.layPop .btn-box{ margin-top:60px;}
.layPop .btn-box .btn{ width:220px;}

.layPop2{ display: none; width: 540px; background-color:#fff; border-radius: 10px; padding:40px;}
.layPop2 .pop-tit{ font-size:28px; color:#111; font-weight: 200;}
.layPop2 .pop-tit em{ font-weight: 400;}
.layPop2 .pop-tit2{ color:#4374cf; font-size: 18px; font-weight: 400;}
.layPop2 .pop-con{ margin-top:40px;}
#pop-aggr .pop-con .ul-list01{ margin-top:20px;}
#pop-aggr .pop-con .ul-list01 li{ font-size:16px; font-weight: 200;}
#pop-aggr .btn{ width: 220px; margin-top:50px;}

.inf-scroll{ margin-top:70px; border: #e1e1e1 1px solid;}
.inf-scroll dt{ border-bottom:#f3f3f3 1px solid; line-height: 60px; height: 60px; color:#111; font-size:16px; padding:0 30px;}
.inf-scroll dd{ height: 190px; overflow-y: auto; padding:20px;}

.div-tab{ background-color:#f2f5fa; border-bottom:#e5ebf5 1px solid;}
.div-tab > ul{ max-width: 1200px; margin: 0 auto;}
.div-tab > ul::after{ content: ''; display: block; clear: both; font-size: 0; height: 0;}
.div-tab > ul > li{ float: left;}
.div-tab > ul > li > a{ display: block; line-height: 99px; height: 99px; position: relative; text-align: center; color:#3a5e9f; font-size: 24px; padding:0 35px; font-weight: 200;}
.div-tab > ul > li > a::after{ content:""; width: 100%; height: 3px; background-color:#3a5e9f; display: block; bottom:-1px; left:0; position: absolute; opacity: 0;}
.div-tab > ul > li.active > a{ color:#183d7f; font-weight: 400;}
.div-tab > ul > li.active > a::after{ opacity: 1;}

.filebox{ display: inline-block;}
.filebox input[type="file"]{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;}
.filebox label{ display: inline-block; padding: 0 50px; color: #fff; vertical-align: middle; background-color: #4374cf; cursor: pointer; border-radius: 2px; height:40px; font-size:14px; line-height:40px; margin:0 0 0 5px;}
.filebox .upload-name{ width: 360px; display: inline-block; padding: 0 10px; line-height: 38px; height: 40px; font-size: 16px; vertical-align: middle; background-color: #fff; border: 1px solid #ebebeb; border-radius:2px; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'Noto Sans KR', '돋움', 'Dotum', Apple Gothic, Tahoma, Verdana, sans-serif;}

table.data{ border-collapse:separate; *border-collapse:collapse; border-spacing:0px; clear:both; table-layout:fixed; border-top:#494949 2px solid; }
table.data thead th,
table.data tbody th{ padding:15px 0; text-align: center; background-color:#fbfbfb; color:#111; font-weight: 400; font-size: 18px; border-bottom:#e9e9e9 1px solid; border-left:#e9e9e9 1px solid;}
table.data tbody td{ padding:0 10px; text-align: center; border-bottom:#e9e9e9 1px solid; border-left:#e9e9e9 1px solid; font-size: 16px; height: 60px; vertical-align: middle;}
table.data .brdN{ border-left:none;}
table.data .l{ padding-left:25px; text-align: left;}
table.data .ul-list01{ padding:10px;}
table.data .ul-list01 li{ line-height: 1.4;}
table.data .cost{ text-align: right; padding-right:8%;}
table.data .dw1{ width: 15%;}
table.data .dw2{ width: 8%;}
table.data .dw4{ width: 8%;}

@media screen and (min-width:768px) and (max-width:1023px){
    .mob{ display: block;}
    .breadcrumb .pc{ display: none;}
    .breadcrumb .mobile{ position: relative; display: block; line-height: 46px; text-align: center; }
    .breadcrumb .mobile strong{ display: inline-block; font-size: 15px;}
    .breadcrumb .mobile > a{ position: absolute; top:0; display: inline-block; width: 46px; height: 46px;}
    .breadcrumb .mobile > a span{ position: absolute; top:-9999px; left: -9999px;}
    .breadcrumb .mobile > a.prev{ left: 0;}
    .breadcrumb .mobile > a.next{ right: 0;}
    .breadcrumb .mobile > a::after{ content: ''; width: 6px; height: 6px; border-top:#fff 2px solid; border-right:#fff 2px solid; display: block; position: absolute; top:50%; left: 50%; margin:-3px 0 0 -3px; transform: rotate(45deg);}
    .breadcrumb .mobile > a.prev::after{ transform: rotate(-135deg);}
    
    .sub-vis .inbx{ padding:76px 0 0 0; height: 500px;}
    .sub-vis .sub-tit{ padding:0 4.5vw; margin-top:40px;}
    .sub-vis .copy{ padding:0 4.5vw; margin-top:15px;}
    .sub-vis.down .img{ width: 170px; height: 189px; top:auto; bottom:36px; right: 4.5vw;}
    .sub-vis.release .img{ width: 170px; height: 189px; top:auto; bottom:36px; right: 4.5vw;}
    .sub-vis.license .img{ width: 170px; height: 189px; top:auto; bottom:36px; right: 4.5vw;}
    .sub-vis.about .img{ width: 170px; height: 189px; top:auto; bottom:36px; right: 4.5vw;}
    .sub-vis.pricing .img{ width: 170px; height: 156px; top:auto; bottom:36px; right: 4.5vw;}
    
    .s-content .inner{ padding: 60px 20px;}
    
    .layPop{ width: 98%; }
    
    .filebox{ position: relative; width: 100%; display: block; padding:0 80px 0 0;}
    .filebox .upload-name{ width: 100%;  }
    .filebox label{ position: absolute; top:0; right:0; width: 80px; padding:0; text-align: center;}
}

@media screen and (max-width:767.98px){
    
    .opacity{ opacity: 1;}
    .mob{ display: block;}
    
    .breadcrumb .pc{ display: none;}
    .breadcrumb .mobile{ position: relative; display: block; line-height: 46px; text-align: center; }
    .breadcrumb .mobile strong{ display: inline-block; font-size: 15px;}
    .breadcrumb .mobile > a{ position: absolute; top:0; display: inline-block; width: 46px; height: 46px;}
    .breadcrumb .mobile > a span{ position: absolute; top:-9999px; left: -9999px;}
    .breadcrumb .mobile > a.prev{ left: 0;}
    .breadcrumb .mobile > a.next{ right: 0;}
    .breadcrumb .mobile > a::after{ content: ''; width: 6px; height: 6px; border-top:#fff 2px solid; border-right:#fff 2px solid; display: block; position: absolute; top:50%; left: 50%; margin:-3px 0 0 -3px; transform: rotate(45deg);}
    .breadcrumb .mobile > a.prev::after{ transform: rotate(-135deg);}
    .breadcrumb .mobile a + strong,
    .breadcrumb .mobile span + strong{ padding-left: 0; margin-left: 0;}
    .breadcrumb .mobile a + strong::before,
    .breadcrumb .mobile span + strong::before{ display: none;}
    
    .sub-vis .inbx{ padding:76px 0 0 0; height: 430px;}
    .sub-vis .sub-tit{ padding:0 4.5vw; margin-top:40px; font-size: 33px;}
    .sub-vis .copy{ padding:0 4.5vw; font-size: 16px; margin-top:15px;}
    .sub-vis.down .img{ width: 170px; height: 189px; top:auto; bottom:36px; right: 4.5vw;}
    .sub-vis.release .img{ width: 170px; height: 189px; top:auto; bottom:36px; right: 4.5vw;}
    .sub-vis.license .img{ width: 170px; height: 189px; top:auto; bottom:36px; right: 4.5vw;}
    .sub-vis.about .img{ width: 170px; height: 189px; top:auto; bottom:36px; right: 4.5vw;}
    .sub-vis.pricing .img{ width: 170px; height: 156px; top:auto; bottom:36px; right: 4.5vw;}
    
    .s-content .inner{ padding: 40px 4.5vw;}
    
    .layPop{ width: 92%; }
    .layPop .pop-tit{ height: 50px; line-height: 50px; padding:0 20px; font-size: 13px;}
    .layPop .pop-tit2{ font-size: 18px; margin-bottom: 15px;}
    .layPop .bt-close{ width: 25px; height: 25px; top:12px; right: 20px; background-size:8px;}
    .layPop .pop-con{ padding:20px;}
    .layPop .reg-bx .dv-row > *{ line-height: 30px;}
    .layPop .reg-bx .dv-row + .dv-row{ margin-top:5px;}
    .layPop .reg-bx .dv-row .hd{ width: 60px; font-size: 12px; line-height: 30px;}
    .layPop .reg-bx .dv-row .hd::before{ margin-right: 3px;}
    .layPop .reg-bx .dv-row .input{ width: 100%;}
    .layPop .reg-bx .dv-row .help-tx{ display: block; margin-top:5px; line-height: 1; font-size: 12px;}
	.layPop .reg-bx .dv-row .bd .btn.fr{ float:none !important; display:block; margin:.5rem auto 0;} 
    .layPop .dv-chk{ margin-top:25px;}
    .layPop .dv-chk label{ margin-right:20px;}
    .layPop .dv-chk label::before{ margin-right: 10px;}
	.layPop .dv-chk .btn.fr{ float:none !important; display:block; margin:.5rem auto 0;} 
    .layPop .cmt{ margin:20px 0 10px; text-indent: -20px; padding-left:20px;}
    .layPop .btn-box{ margin-top:25px;}
    .layPop .btn-box .btn{ width:48%;}
    
    .layPop2{ width: 92%; padding:20px;}
    .layPop2 .pop-tit{ font-size: 16px;}
    .layPop2 .pop-tit2{ font-size: 14px;}
    .layPop2 .pop-con{ margin-top:20px;}
    #pop-aggr .pop-con .ul-list01 li{ font-size:12px;}
    #pop-aggr .btn{ margin-top:25px;}
    
    .inf-scroll{ margin-top:30px;}
    .inf-scroll dt{ padding:0 20px; font-size: 13px; line-height: 40px; height: 40px;}
    .inf-scroll dd{ padding:10px; height: 160px;}
    
    .div-tab > ul{ padding:0 4.5vw;}
    .div-tab > ul > li > a{ height: 50px; line-height: 50px; font-size: 16px;}
    .div-tab > ul > li > a::after{ height: 2px;}
    
    .filebox{ position: relative; width: 100%; display: block; padding:0 80px 0 0;}
    .filebox .upload-name{ width: 100%;  height: 30px; line-height: 30px; font-size: 12px; }
    .filebox label{ position: absolute; top:0; right:0; width: 80px; padding:0; height: 30px; line-height: 30px; text-align: center;}    
    
    table.data .dw1{ width: 24%;}
    table.data .dw2{ width: 15%;}
    table.data .dw4{ width: 12%;}
}


/* down */
.down-slide{ overflow: hidden; margin-bottom:80px;}
.down-slide .swiper-slide{ width: 380px; margin-right:30px;}
.down-slide .swiper-slide .box{ width: 100%; height: 290px; color:#fff; font-size: 16px; text-align: center; padding:45px 0 0 0;}
.down-slide .swiper-slide .box span{ display: block; font-size: 16px;}
.down-slide .swiper-slide .box strong{ display: block; font-size: 28px; margin-top:15px; font-weight: 400;}
.down-slide .swiper-slide .box .bt{ margin-top:75px; }
.down-slide .swiper-slide .box .bt .btn{ width: 180px; }
.down-slide .swiper-slide .box .bt .btn:hover{ opacity: .8;}
.down-slide .swiper-slide .box.itm1{ background: url('../images/down_img0101.jpg') 50% 50% no-repeat;}
.down-slide .swiper-slide .box.itm2{ background: url('../images/down_img0102.jpg') 50% 50% no-repeat;}
.down-slide .swiper-slide .box.itm3{ background: url('../images/down_img0103.jpg') 50% 50% no-repeat;}
.down-slide .pager{ display: none;}
.down-slide .swiper-slide .dw{ display:block; text-align:center; color:#225ce2; margin-top:25px;}

.tit-area{ position: relative; margin:0 0 10px; padding:0 0 30px 0;}
.tit-area::after{ content: ''; position: absolute; width: 28px; height: 3px; background-color:#0137bb; display: block; bottom: 0; left:0;}
.tit-area .tit{ position: relative; font-size: 36px; color:#111; font-weight: 400; padding:10px 0 0 0;}
.tit-area .tit::before{ content: ''; position: absolute; top:0; left:8px; width:3px; height: 3px; display: inline-block; border-radius: 50%; background-color:#0137bb;}
.tit-area .tit::after{ content: ''; position: absolute; top:0; left:16px; width:3px; height: 3px; display: inline-block; border-radius: 50%; background-color:#0137bb;}
.tit-area .tit em{ color:#0137bb;}

.sub-tit3{ margin:70px 0 20px; font-size: 28px; color:#336fdc; font-weight: 400;}
.sub-tit3 em{ font-weight: 600;}
.sub-tit1{ margin:50px 0 20px; font-size: 24px; color:#111; font-weight: 400;}

.ul-list01 li{ color:#111; text-indent: -15px; padding-left:15px;}
.ul-list01 li + li{ margin-top:5px;}
.ul-list01 li::before{ content: ''; background-color:#e2e2e2; display: inline-block; margin-right:10px; width:3px; height: 3px; border-radius: 50%; vertical-align: middle; color:#e1e1e1;}

/*service & policy*/
.ul-list02 li{ color:#111; text-indent: -15px; padding-left:15px; font-size: 16px; font-weight:400;}
.ul-list02 li ul {margin:10px 0;}
.ul-list02 li li {font-size:14px;font-weight:300;}
.ul-list02 li span {color:#7299df;}
.ul-list02 li + li{ margin-top:5px;}
.ul-list02 li li::before{ content: ''; background-color:#e2e2e2; display: inline-block; margin-right:10px; width:3px; height: 3px; border-radius: 50%; vertical-align: middle; color:#e1e1e1;}
.ul-list03 {margin:20px 0;}
.ul-list03 li { color:#111; text-indent: -15px; padding-left:15px; font-size: 16px; font-weight:300; }
.poltxt {font-size:18px; font-weight:300; margin:20px 0;}
/*service & policy*/

.down-bx .ul-list01 li{ font-size: 18px;}
.down-bx .tx-lg{ font-size:1.4rem; font-weight: 200; margin-bottom:1rem;}
.release-bx .ul-list01 li{ font-size: 18px;}

.s-content.down-gray{ background-color:#f9f9f9; }
.s-content.down-gray .tit-area em{ color:#9e0b0f;}
.s-content.down-gray .tit-area .tit::before,
.s-content.down-gray .tit-area .tit::after,
.s-content.down-gray .tit-area::after{ background-color:#9e0b0f;}
.s-content.down-gray .down-desc01{ font-size: 28px; color:#111; margin-top:70px;}
.s-content.down-gray .down-desc02{ margin-top:50px; border-top:#6584e0 1px solid;}
.s-content.down-gray .down-desc02 > li{ display: table; width: 100%; border-bottom:#eaeaea 1px solid; text-align: center; }
.s-content.down-gray .down-desc02 > li > *{ display: table-cell; padding:20px; width: 50%; vertical-align: middle;}
.s-content.down-gray .down-desc02 > li > div{ background-color:#fff; border-right:#eaeaea 1px solid; }
.s-content.down-gray .down-desc02 > li > div strong{ display: block; font-size: 20px; color:#111; font-weight: 400;}
.s-content.down-gray .down-desc02 > li > div span{ display: block; font-size: 16px; color:#bcbcbc;}
.s-content.down-gray .down-desc02 > li > a{ color:#0e49db; font-size: 20px;}
.s-content.down-gray .down-desc02 > li > a:hover{ text-decoration: underline;}

.inst-bt{ margin-top:70px;}
.inst-bt .bt-open{ border:#336fdc 2px solid; width:60px; height: 60px; border-radius: 50%; margin: 40px auto 0; display: block; text-indent: -9999px; background:url('../images/blt_open.png') 50% 50% no-repeat;}
.inst-bt .bt-open.active{ background:url('../images/blt_close.png') 50% 50% no-repeat;}
.inst-bt > h4{ display: block; font-size: 18px; color:#0d1d42; padding:0; margin:0 auto; width: 250px; font-weight: 400;}
.inst-bt > h4::after{ content: ''; display: block; width:100%; height: 2px; background-color:#0d1d42; margin-top:15px;}
.inst-guide{ border:#e1e1e1 1px solid; border-radius:10px; padding:60px; margin-top:80px; display: none;}
.inst-guide .item + .item{ margin-top:60px; padding-top:60px; border-top:#c7c7c7 1px dotted;}
.inst-guide .item > i{ display: inline-block; background-color: #336fdc; color:#fff; text-align: center; line-height: 30px; font-size: 12px; width: 30px; border-radius: 50%;}
.inst-guide .item .itm-bx{ position: relative; display: table; width: 100%; margin-top:40px;}
.inst-guide .item .itm-bx > *{ display: table-cell; vertical-align: top;}
.inst-guide .item .itm-bx h5{ font-size: 28px; color:#111; font-weight: 200;}
.inst-guide .item .itm-bx h5 em{ font-weight: 400;}
.inst-guide .item .itm-bx .desc{ padding-bottom: 110px;}
.inst-guide .item .itm-bx .desc ul.ul-list01{ margin-top:20px;}
.inst-guide .item .itm-bx .desc ul.ul-list01 li{ font-size:16px;}
.inst-guide .item .itm-bx .down-bt{ position: absolute; bottom: 0; left: 0; display: inline-block; color:#336fdc; font-size: 16px; border:#336fdc 1px solid; height: 50px; line-height: 48px; border-radius:25px; padding:0 26px 0 35px;}
.inst-guide .item .itm-bx .down-bt::after{ content: ''; width:10px; height: 10px; display: inline-block; border-top:#336fdc 2px solid; border-right: #336fdc 2px solid; transform: rotate(45deg); margin-left:24px;}
.inst-guide .item .itm-bx .down-bt:hover{ background-color:#336fdc; color:#fff;}
.inst-guide .item .itm-bx .down-bt:hover::after{ border-color:#fff;}
.inst-guide .item .itm-bx .thum{ width: 460px; }
.inst-guide .item .itm-bx .thum .thumb{ position: relative; }
.inst-guide .item .itm-bx .thum .thumb img{ display: block;}
.inst-guide .item .itm-bx .thum .thumb a{ width: 60px; height: 60px; background:url('../images/ic_play2.png') 50% 50% no-repeat; display: block; text-indent: -9999px; position: absolute; top:50%; left:50%; margin:-30px 0 0 -30px;}
.inst-guide .item .itm-bx .thum .thumb a:hover{ opacity: .8;}
.inst-guide .item .itm-bx .thum .caption{ text-align: center; color:#024dfe; font-size: 16px; margin-top:30px; display: block;}

@media screen and (min-width:768px) and (max-width:1023px){  
    .down-slide .pager{ display: block; margin: 20px 0 0 0; text-align: center; position: relative;}
    .down-slide .pager .swiper-pagination-bullet{ background-color:#e1e1e1; border-color:#e1e1e1;}
    .down-slide .pager .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color:#2352bf; border-color:#2352bf;}
    
    .inst-guide .item .itm-bx{ margin-top:20px; display: block;}
    .inst-guide .item .itm-bx > *{ display: block;}
    .inst-guide .item .itm-bx .desc{ padding-bottom: 0;}
    .inst-guide .item .itm-bx .down-bt{ position: relative; bottom: auto; left:auto; display: block; width:400px; margin:27px auto 0;  text-align: center;}
    .inst-guide .item .itm-bx .thum{ width: 100%; margin-top:25px; text-align: center;}
    .inst-guide .item .itm-bx .thum img{ margin: 0 auto;}
}

@media screen and (max-width:767.98px){
    .tit-area{ margin-bottom:40px;}
    .down-slide .swiper-slide{ margin: 0;}
    .down-slide .pager{ display: block; margin: 20px 0 0 0; text-align: center; position: relative;}
    .down-slide .pager .swiper-pagination-bullet{ background-color:#e1e1e1; border-color:#e1e1e1;}
    .down-slide .pager .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color:#2352bf; border-color:#2352bf;}
    
    .tit-area{ padding-bottom:15px;}
    .tit-area .tit{ font-size: 20px;}
    .tit-area::after{ height: 2px; width: 14px;}
    
    .sub-tit3{ margin: 30px 0 10px; font-size: 16px;}
    .sub-tit1{ margin: 30px 0 10px; font-size: 16px;}
    
    .ul-list01 li{ font-size: 13px;}
    .down-bx .ul-list01 li{ font-size: 13px;}
    .down-bx .tx-lg{ font-size:1rem; }
    .release-bx .ul-list01 li{ font-size: 13px;}
    
    .s-content.down-gray .down-desc01{ margin-top:30px; font-size: 16px;}    
    
    .s-content.down-gray .down-desc02{ margin-top:25px;}
    .s-content.down-gray .down-desc02 > li{ display: block;}
    .s-content.down-gray .down-desc02 > li > *{ display: block; width: 100%; padding:8px; font-size: 13px;}
    .s-content.down-gray .down-desc02 > li > a{ padding:15px 0; font-size: 14px;}
    .s-content.down-gray .down-desc02 > li > div{ border-bottom: #eaeaea 1px solid;}
    .s-content.down-gray .down-desc02 > li > div strong{ font-size: 14px;}
    .s-content.down-gray .down-desc02 > li > div span{ font-size: 12px;}
    
    .inst-bt{ margin-top:40px;}
    .inst-bt > h4{ font-size: 13px; width: 190px; text-align: center; }
    .inst-bt > h4::after{ margin-top:10px;}
    
    .inst-bt .bt-open{ margin-top:20px; width: 30px; height: 30px; background-size:5px auto;}
    .inst-bt .bt-open.active{ background-size:8px auto;}
    
    .inst-guide{ margin-top:30px; padding:30px 15px;}
    .inst-guide .item + .item{ margin-top:40px; padding-top:40px;}
    .inst-guide .item > i{ width: 20px; height: 20px; font-size: 8px; line-height: 20px;}
    .inst-guide .item .itm-bx{ margin-top:20px; display: block;}
    .inst-guide .item .itm-bx > *{ display: block;}
    .inst-guide .item .itm-bx h5{ font-size: 16px;}
    .inst-guide .item .itm-bx .desc{ padding-bottom: 0;}
    .inst-guide .item .itm-bx .desc ul.ul-list01{ margin-top:10px;}
    .inst-guide .item .itm-bx .desc ul.ul-list01 li{ font-size: 13px;}
    .inst-guide .item .itm-bx .down-bt{ position: relative; bottom: auto; left:auto; display: block; font-size: 13px; margin:27px 1rem 0; height: 30px; width: auto; line-height: 28px; padding:0; text-align: center;}
    .inst-guide .item .itm-bx .down-bt::after{ width: 6px; height: 6px; border-top:#336fdc 1px solid; border-right: #336fdc 1px solid; margin-left:15px; vertical-align: 2px; }
    .inst-guide .item .itm-bx .thum{ width: 100%; margin-top:25px;}
    .inst-guide .item .itm-bx .thum .thumb a{ width: 30px; height: 30px; margin:-15px 0 0 -15px; background-size: 100%;}
    .inst-guide .item .itm-bx .thum .caption{ font-size: 13px; margin-top:17px;}
}

/* pricing */
.step-tit{ border:#336fdc 2px solid; height: 40px; line-height: 36px; width: 110px; text-align: center; font-size: 18px; color:#336fdc; display: block; font-weight: 400; border-radius: 20px; margin:0 0 45px 0;}
.step-tit i{ font-size: 16px; display: inline-block; margin-right: 10px;}
.pric-bx + .step-tit{ margin-top:80px;}
.pric-bx::after{ content: ''; display: block; clear: both; font-size: 0; height: 0;}
.pric-bx .dv-l{ float:left; width: 660px;}
.pric-bx .dv-r{ float:right; width: 480px;}
.pric-bx .pric-tit{ height: 60px; position: relative;}
.pric-bx .pric-tit .right{ float:right;}
.pric-bx .pric-tit .tit{ font-size: 28px; color:#111; font-weight: 200; display: inline-block;}
.pric-bx .pric-tit .tit em{ font-weight: 400;}
.pric-bx .pric-tit .tit.sm{ font-size: 20px; font-weight:400;}
.pric-bx .pric-tit span{ margin-left:20px;}
.pric-bx .cmt{ margin-top:25px; padding:0 0 0 20px;}

.data-dv{ border-collapse:separate; *border-collapse:collapse; border-spacing:0px; clear:both; table-layout:fixed; border-top:#494949 2px solid; }
.data-dv .dv-row{ display: table; width: 100%; border-bottom:#ececec 1px solid; table-layout: fixed;}
.data-dv .dv-row > *{ display: table-cell;}
.data-dv .dv-row .dv-grp{ width:50%;}
.data-dv .dv-row .hd{ display: table-cell; width: 180px; height: 60px; vertical-align: middle; background-color:#fbfbfb; font-size: 16px; color:#111; text-align: center;}
.data-dv .dv-row .bd{ display: table-cell; vertical-align: middle; padding:0 10px; font-size: 16px;}
.data-dv .dv-row .dv-grp .bd{ width:420px;}
.data-dv .dv-row .bd,
.data-dv .dv-row .dv-grp + .dv-grp{ border-left:#ececec 1px solid;}
.data-dv .dv-row .help-tx{ display: inline-block; color:#8ea4e4; font-size: 14px;}
.data-dv .input{ min-width: 40%;}
.data-dv .select{ height: 40px; line-height: 40px; width: 40%; border: #ebebeb 1px solid;}

.aggr-bx{ margin-top:80px; border-top:#4374cf 2px solid;}
.aggr-bx .tx-lg{ color:#111; padding:50px 0; text-align: center; font-size: 28px; font-weight: 200;}
.aggr-bx .chk{ position: relative; text-align: center;}
.aggr-bx .chk label{ color:#111; font-size: 16px;}
.aggr-bx .chk label em{ color:#336fdc; text-decoration: underline; cursor: pointer;}
.aggr-bx .btn-box{ margin-top:60px;}
.aggr-bx .btn-box .btn{ width:220px;}

.layPop .data-dv .dv-row .hd{ width:140px; height: 50px; line-height: 50px;}
.layPop .data-dv .dv-row .bd{ height: 50px; line-height: 1.2; width: 580px;}
.layPop .data-dv .dv-row .dv-grp .bd{ width: 210px;}
.layPop table.data thead th, 
.layPop table.data tbody th{ padding:10px 0; font-size: 16px;}
.layPop table.data td{ height: 49px; line-height: 1.2;}
.layPop .dv-row .ul-list01{ padding:10px;}

.upg-chk{ background-color:#4374cf; border-radius:10px; padding:60px; margin-bottom:120px;}
.upg-chk .tit{ color:#fff; font-weight: 400; line-height: 1; font-size: 36px;}
.upg-chk .tit em{ font-weight: 600;}
.upg-chk .tx-lg{ margin:45px 0 20px; font-size: 20px; color:#fff;}
.upg-chk .inp-grp{ position: relative; display: block; padding:0 130px 0 0;}
.upg-chk .inp-grp .input{ width:100%; display: block; height: 56px; line-height: 54px; text-align: center; font-size: 18px;}
.upg-chk .inp-grp .bt-cp{ position: absolute; top:0; right:0; display: block; width: 125px; height: 56px; line-height: 54px; text-align: center; border:#fff 1px solid; border-radius: 2px; color: #fff;}
.upg-chk .inp-grp .bt-cp:hover{ background-color:#fff; color:#4374cf; }
.upg-chk .cmt{ margin-top:60px; padding:50px 0 0 0; border-top:#fff 1px dotted; text-align: center;}
.upg-chk .cmt span{ display: block; font-size: 28px; color:#fff;}
.upg-chk .cmt strong{ font-size: 18px; color:#c0d1ef; font-weight: 400; display: block; margin-top:10px;}

@media screen and (min-width:768px) and (max-width:1023px){  
    .pric-bx .dv-l{ float: none; width: 100%;}
    .pric-bx .dv-r{ float: none; width: 100%; margin-top:2rem;}
    
    .data-dv .dv-row .hd{ padding:4px 10px;}
    .data-dv .dv-row .bd{ padding:4px 10px;}
    .data-dv .dv-row .dv-grp .bd{ width: 182px;}
}

@media screen and (max-width:767.98px){
    .step-tit{ border:#336fdc 1px solid; height: 26px; line-height: 24px; font-size:13px; width: 90px; margin-bottom: 20px;}
    .step-tit i{ font-size: 11px; margin-right: 5px;}
    
    .pric-bx .pric-tit{ height: 40px;}
    .pric-bx .pric-tit .tit,
    .pric-bx .pric-tit .tit.sm{ font-size:16px;}
    .pric-bx .dv-l{ float: none; width: 100%;}
    table.data thead th{ padding:10px; font-size: 12px;}
    table.data tbody td{ padding:10px; font-size: 12px; line-height: 1.4; height: auto;}
    table.data tbody td .num{ width: 100%;}
    .pric-bx .dv-r{ float: none; width: 100%; margin-top:1.5rem;}
    .pric-bx + .step-tit{ margin-top:30px;}
    .data-dv .dv-row .hd{ width: 90px; height: auto; padding:10px; font-size: 12px;}
    .data-dv .dv-row .bd{ height: auto; padding:10px; font-size: 12px;}
    .data-dv .dv-row .bd .input{ width: 100%;}
    .data-dv .dv-row .dv-grp .bd { width: auto;}
    .data-dv .dv-row .dv-grp .bd .input{ width: calc(91vw - 112px);}
    .data-dv .dv-row .help-tx{ font-size: 12px;}
    .data-dv .dv-row .dv-grp{ display: block; width: 100%;}
    .data-dv .dv-row .dv-grp + .dv-grp{ border-left:none; border-top:#ececec 1px solid;}
    .data-dv .select{ height: 30px; line-height: 30px; width: 100%;}
    .data-dv .dv-row .bd .btn.btn-sm{ display: block; width: 100%; margin-top:5px;}
    
    .pric-bx .cmt{ margin-top:10px; padding:0;}
    
    .aggr-bx{ margin-top:20px;}
    .aggr-bx .tx-lg{ padding:20px 0; font-size: 14px;}
    .aggr-bx .chk label{ font-size: 12px;}
    .aggr-bx .btn-box{ margin-top:30px;}
    .aggr-bx .btn-box .btn{ max-width: 46%; padding: 0;}
    
    .layPop .data-dv .dv-row .hd{ width:80px; height: 40px; line-height: 40px; padding:0 10px;}
    .layPop .data-dv .dv-row .bd{ height: 40px; line-height: 1.4; padding:0 10px; width: auto;}
    .layPop table.data thead th, 
    .layPop table.data tbody th{ padding:10px 0; font-size: 12px;}
    .layPop table.data td{ height: auto; line-height: 1.2; padding:10px;}
    .layPop .data-dv .dv-row .help-tx{ line-height: 1.4;}
    
    .upg-chk{ padding:20px; margin-bottom:60px;}
    .upg-chk .tit{ font-size: 16px;}
    .upg-chk .tx-lg{ margin:20px 0 10px; font-size: 14px;}
    .upg-chk .inp-grp{ padding:0 80px 0 0; }
    .upg-chk .inp-grp .input{ height: 34px; line-height: 32px; font-size: 12px;}
    .upg-chk .inp-grp .bt-cp{ height: 34px; line-height: 32px; font-size: 12px; width: 76px;}
    .upg-chk .cmt{ margin-top:20px; padding:15px 0 0 0;}
    .upg-chk .cmt span{ font-size: 16px;}
    .upg-chk .cmt strong{ font-size: 14px;}
    
}

/* license */
.license-desc01{ font-size: 18px;}

.license-kn{ border:#e1e1e1 1px solid; border-radius:10px; padding:60px; margin-top:80px;}
.license-kn .item + .item{ margin-top:60px; padding-top:60px; border-top:#c7c7c7 1px dotted;}
.license-kn .item > i{ display: inline-block; background-color: #336fdc; color:#fff; text-align: center; line-height: 30px; font-size: 12px; width: 30px; border-radius: 50%;}
.license-kn .item .itm-bx{ position: relative; display: table; width: 100%; margin-top:40px;}
.license-kn .item .itm-bx > *{ display: table-cell; vertical-align: top;}
.license-kn .item .itm-bx h5{ font-size: 28px; color:#111; font-weight: 200;}
.license-kn .item .itm-bx h5 em{ font-weight: 400;}
.license-kn .item .itm-bx .desc ul.ul-list01{ margin-top:20px;}
.license-kn .item .itm-bx .desc ul.ul-list01 li{ font-size:16px;}

@media screen and (max-width:767.98px){
    .license-desc01{ font-size: 13px;}
    .license-kn{ margin-top:20px; padding:30px 15px;}
    .license-kn .item + .item{ margin-top:40px; padding-top:40px;}
    .license-kn .item > i{ width: 20px; height: 20px; font-size: 8px; line-height: 20px;}
    .license-kn .item .itm-bx{ margin-top:20px; display: block;}
    .license-kn.item .itm-bx > *{ display: block;}
    .license-kn .item .itm-bx h5{ font-size: 16px;}
    .license-kn .item .itm-bx .desc{ padding-bottom: 0;}
    .license-kn .item .itm-bx .desc ul.ul-list01{ margin-top:10px;}
    .license-kn .item .itm-bx .desc ul.ul-list01 li{ font-size: 13px;}
}


/* about */
.about-sec01 .desc{ position: relative; padding-left: calc(50% + 40px); }
.about-sec01 .desc .img{ position: absolute; top:-50px ;left:0; width: 50%; }
.about-sec01 .desc01{ font-size: 36px;}
.about-sec01 .desc01 span{ font-weight: 200; display: block;}
.about-sec01 .desc01 em{ position: relative; font-weight: 400;}
.about-sec01 .desc01 em::after{ content: ''; position: absolute; bottom:8px; left:0; width: 100%; height: 1px; background-color:#000;}
.about-sec01 .desc01 strong{ font-weight: 400;}
.about-sec01 .desc02{ font-size: 16px; margin-top:50px; padding-right: 100px;}
.about-lst{ margin-top:160px; overflow: hidden; margin-left:-60px;}
.about-lst li{ position: relative; width: 360px; height: 380px; border-radius: 10px; overflow: hidden; margin-left:60px; float: left; text-align: center; padding-top:180px;}
.about-lst li strong{ display: block; font-size: 30px; font-weight: 400; margin-bottom:25px;}
.about-lst li::before{ content: ''; display: block; position: absolute; top:76px; left:50%; margin-left:-30px; width: 60px; height: 60px; background-position: 50% 50%; background-repeat: no-repeat;}
.about-lst li:nth-child(1){ background-color:#1f57e1; color:#fff;}
.about-lst li:nth-child(2){ background-color:#fff; color:#111; border:#ebebeb 1px solid;}
.about-lst li:nth-child(3){ background-color:#eeeff2; color:#111;}
.about-lst li:nth-child(1)::before{ background-image:url('../images/about_ic1.png');}
.about-lst li:nth-child(2)::before{ background-image:url('../images/about_ic2.png');}
.about-lst li:nth-child(3)::before{ background-image:url('../images/about_ic3.png');}

.about-sec02{ margin-top:80px; border-top:#e5e5e5 1px solid;}
.about-sec02 .map-bx{ border-radius: 10px; overflow: hidden; margin-top:50px;}
.about-sec02 .map-bx .map{ width: 100%; height: 400px;}
.about-sec02 .loc-bx{ margin-top:80px; overflow: hidden; margin-left:-45px;}
.about-sec02 .loc-bx li{ position: relative; float:left; width: 370px; margin-left:45px; padding-left:120px; font-size: 16px; }
.about-sec02 .loc-bx li::before{ content: ''; display: block; position: absolute; top:50%; left:40px; width: 40px; height: 40px; margin-top:-20px; background-position: 50% 50%; background-repeat: no-repeat;}
.about-sec02 .loc-bx li strong{ display: block; border-bottom:#0d1d42 1px solid; padding-bottom:10px;}
.about-sec02 .loc-bx li span{ margin-top:10px; display: block;}
.about-sec02 .loc-bx li:nth-child(1)::before{ background-image: url('../images/about_loc1.png');}
.about-sec02 .loc-bx li:nth-child(2)::before{ background-image: url('../images/about_loc2.png');}
.about-sec02 .loc-bx li:nth-child(3)::before{ background-image: url('../images/about_loc3.png');}

@media screen and (min-width:768px) and (max-width:1280.98px){ 
    .about-sec01 .desc02{ padding-right: 0;}
    .about-lst{ margin-left:0;}
    .about-lst li{ width: 32%; margin-left:0;}
    .about-lst li + li{ margin-left:2%;}
    
    .about-sec02 .loc-bx{ margin-left:0;}
    .about-sec02 .loc-bx li{ width: 32%; margin-left:0; padding-left:60px; padding-right: 20px;}
    .about-sec02 .loc-bx li + li{ margin-left:2%;}
    .about-sec02 .loc-bx li::before{ left:0;}
}

@media screen and (max-width:767.98px){
    .about-sec01 .desc{ padding-left:0;}
    .about-sec01 .desc .img{ position: relative; top:auto; left:auto; margin-top:0; width: 100%;}
    .about-sec01 .desc01{ font-size: 18px; margin-top:40px;}
    .about-sec01 .desc01 em::after{ bottom:4px;}
    .about-sec01 .desc02{ margin-top:20px; padding-right: 0; font-size: 13px;}
    .about-lst{ margin-top:30px; margin-left:0;}
    .about-lst li{ width:100%; margin:0; padding-top: 140px; height: 300px;}
    .about-lst li + li{  margin:1rem 0 0 0;}
    .about-lst li strong{ font-size: 18px;}
    .about-lst li::before{ top:40px;}
    
    .about-sec02{ margin-top:40px;}
    .about-sec02 .map-bx{ margin-top:20px;}
    .about-sec02 .loc-bx{ margin-top:20px; margin-left:0;}
    .about-sec02 .loc-bx li{ width: 100%; margin-left:0; font-size: 13px; padding-left:60px;}
    .about-sec02 .loc-bx li + li{ margin-top:1rem;}
    .about-sec02 .loc-bx strong{ font-size: 14px;}
    .about-sec02 .loc-bx li::before{ left:0;}
    
}

.price-tx{ font-size: 1.125rem;}
.price-tx a{ color: #336fdc; text-decoration: underline;}

.eng-tw .div-tab{ margin: 100px 0 80px;}
.eng-tw .pric-bx2{ margin-top:50px;}
.eng-tw .pric-bx2 .tx01{ font-size: 1rem;}
.eng-tw .pric-bx2 .form-bx{ display: table; width: 100%; margin-top:20px;}
.eng-tw .pric-bx2 .form-bx > *{ display: table-cell; vertical-align: middle;}
.eng-tw .pric-bx2 .form-bx .hd{ width: 75px;}
.eng-tw .pric-bx2 .form-bx .hd::before{ content: ''; width: 3px; height: 3px; display: inline-block; margin-right: 10px; background-color: #e1e1e1; vertical-align: middle;}
.eng-tw .pric-bx2 .form-bx .input{ width: 50%;}

@media screen and (max-width:767.98px){    
    .eng-tw .div-tab{ margin: 50px 0 40px;}
    .eng-tw .div-tab > ul{ padding:0; }
    .eng-tw .div-tab > ul > li{ width: 50%;}
    .eng-tw .div-tab > ul > li > a{ padding: 0; font-size: 14px; display: block; text-align: center;} 
    .eng-tw .pric-bx2 .form-bx .hd{ vertical-align: top; padding-top:4px;}
    .eng-tw .pric-bx2 .form-bx .input{ width: 100%; }
    .eng-tw .pric-bx2 .form-bx .btn.btn-sm{ width: 100%; margin-top:5px;}
}

.pop-video{ width:880px; display:none;}
.pop-video .video{ width:100%; margin:0;}
.pop-video .mov { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.pop-video .mov iframe, 
.pop-video .mov object, 
.pop-video .mov embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.pop-video .bt-close{ position: absolute; top:-40px; right:0; width:33px; height: 33px; background:url('../images/bt_close.png') 50% 50% no-repeat; display: block; text-indent: -9999px;}

.pop-ani{ width:880px; display:none;}
.pop-ani .video{ width:100%; margin:0;}
.pop-ani .mov { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.pop-ani .mov iframe, 
.pop-ani .mov object, 
.pop-ani .mov embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.pop-ani .bt-close{ position: absolute; top:-40px; right:0; width:33px; height: 33px; background:url('../images/bt_close.png') 50% 50% no-repeat; display: block; text-indent: -9999px;}

@media screen and (max-width:767.98px){    
	.pop-video{ width:100%; padding:0 4.5vw;}
	.pop-video .bt-close{ position: absolute; top:-25px; right:4.5vw; width:20px; height: 20px;}
    
    .pop-ani{ width:100%; padding:0 4.5vw;}
	.pop-ani .bt-close{ position: absolute; top:-25px; right:4.5vw; width:20px; height: 20px;}
}

.nice-select .list{ max-height:160px; overflow-y:auto;}








/******************************************* 세로가 낮은 화면(높이 860px 이하) 보정 ******************************************* */
/* 경계가 860px 인 이유: iOS Safari 는 미디어 쿼리의 height 를 주소창이 접힌 "최대 뷰포트" 기준으로 평가해서
   아이패드 가로(뷰포트 820px)가 800px 조건에 안 걸렸다. 실제 보이는 높이는 주소창만큼 더 작다 */
/* 아이패드 가로(1180x820, 브라우저 UI 제외 시 ~720px)와 1366x768 노트북은 폭으로는 태블릿/데스크탑이지만
   세로가 낮아서, 데스크탑 기준으로 잡힌 인트로 상하 여백이 100vh 섹션을 넘친다. 세로 여백만 줄여서 담는다. */
@media screen and (min-width:768px) and (max-height:860px){
    #indexwrap .intro .desc .tx02{ margin:15px 0;}
    #indexwrap .intro .desc .tx03 span{ margin-top:10px;}
    #indexwrap .intro .desc .bt-area{ margin-top:50px;}

    /* index01(EXPERIENCE): tx-slide 위 100px+50px 여백 때문에 내용 총높이가 ~740px 이라
       아이패드 가로(~720px)에서 하단 "eXERD는 다릅니다" 문단이 잘렸다. 세로 여백만 압축 */
    /* 위 30px 이던 상단 패딩을 76px 고정 헤더+여유만큼 늘려, 세로 중앙정렬된 첫 요소(main-tit)가 헤더에 가리지 않게 한다 */
    #indexwrap .section .inner{ padding:80px 0 30px;}
    .index01 .desc .tx01{ font-size:32px;}
    .index01 .desc .tx02{ font-size:18px; margin-top:20px;}
    .index01 .tx-slide{ margin-top:40px;}
    .index01 .tx-slide .hd{ font-size:32px;}

    /* index03(PREFERENCE): 제목+카드(760x510)+모니터 받침대(74px)가 합쳐 920px 라 낮은 화면(~700px)에서
       스크롤 없이는 받침대가 잘리고, 내부 스크롤을 내리면 제목이 고정 헤더 뒤로 들어갔다. 세로만 압축한다 */
    .main-tit{ margin-bottom:20px;}
    .index03 .desc{ font-size:28px;}
    .index03 .pref-bx{ margin-top:15px; height:444px;}
    .index03 .pref-bx .item .bx{ height:370px; padding-top:45px;}
    .index03 .pref-bx .item .bx .hd{ font-size:24px;}
    .index03 .pref-bx .item .bx .bd{ margin-top:20px;}
    .index03 .pref-bx .item .bx .bd .thum{ width:190px; margin-bottom:25px;}
    /* 구분선은 PC처럼 아이콘과 설명문 사이에 온다 (압축 카드 기준 재계산) */
    .index03 .pref-bx .item::after{ top:220px;}
    .index03 .pref-bx .pager{ top:30px;}
    /* 좌우 이동 버튼: 370px 압축 카드에서 top:230 은 설명 문구를 덮는다. PC처럼 아이콘 옆 높이로 */
    .index03 .pref-bx > a.ctr{ top:150px;}
}
/* 데스크탑 폭 + 낮은 세로(노트북)에서는 96px 고정 헤더가 중앙정렬된 첫 줄을 덮는다. 태블릿 폭은 위에서 이미 76px 처리 */
@media screen and (min-width:1281px) and (max-height:860px){
    #indexwrap .intro .desc{ padding-top:96px;}
}

/* fullpage responsiveHeight(600px, custom-*.js) 발동 시 body에 fp-responsive가 붙는다.
   섹션 고정높이(100vh 스냅)를 풀어 내용만큼 늘어나는 일반 문서로 동작시키고,
   인트로만 화면 높이 이상을 유지해 첫 화면 구도를 지킨다. 폰 가로모드처럼 세로가 극단적으로 낮은 경우의 안전장치 */
body.fp-responsive #indexwrap .section,
body.fp-responsive #indexwrap .section .fp-tableCell{ height:auto !important;}
body.fp-responsive #indexwrap .intro{ min-height:100vh;}
body.fp-responsive #indexwrap .intro .desc{ padding-top:80px; padding-bottom:40px;}

/* 비교표가 1000px 고정이라 1024px 미만에서 화면을 넘쳐 잘려 보였다. 화면 폭에 맞춰 줄이고 글자·여백을 축소한다 */
@media screen and (max-width:1023.98px){
    .s-content.compare.down-gray .inner .compare-table{ width:100%;}
    .s-content.compare.down-gray .inner .compare-table tr > *{ font-size:13px; padding:8px 4px;}
    .s-content.compare.down-gray .inner .compare-table .description{ font-size:12px;}
}

/* 서브페이지 본문(.s-content .inner)은 좌우 패딩이 0(max-width:1200 중앙정렬 전제)이라
   1024~1280px 태블릿 가로에서 견적·발주 양식 등이 화면에 꽉 붙어 보였다. 좌우 숨통을 준다 */
@media screen and (min-width:1024px) and (max-width:1280.98px){
    .s-content .inner{ padding-left:40px; padding-right:40px;}
    /* 히어로(제목·브레드크럼)와 탭도 같은 이유(max-width:1200 + 좌우 패딩 0)로 화면에 붙어 보였다 */
    .sub-vis .inbx{ padding-left:40px; padding-right:40px;}
    .div-tab > ul{ padding:0 40px;}
    /* 견적표(660px)+가격표(480px) 고정폭 합 1140px 이 좌우 패딩 40px 를 준 컨테이너(1180-80=1100px)를
       넘쳐 오른쪽 표가 아래로 떨어졌다. %로 환산해 PC처럼 나란히 유지한다 */
    .pric-bx .dv-l{ width:57%;}
    .pric-bx .dv-r{ width:40%;}
}

/* 제품 선택 버튼(eXERD 3.0 / SAM Edition)이 고정폭 200px x2 라 폰 화면(375px)을 넘쳐
   첫 버튼은 화면 밖으로 잘리고 둘째 버튼은 아랫줄로 떨어졌다. 모바일에선 반반으로 나눈다 */
@media screen and (max-width:767.98px){
    .div-sub-tab > ul{ display:flex; width:100%;}
    .div-sub-tab > ul > li{ float:none; flex:1; min-width:0;}
    .div-sub-tab > ul > li > a{ width:100%; font-size:15px;}
}

/* 견적/발주 양식(.data-dv)은 라벨 180px+입력 420px=600px(=1200의 절반)라는 PC 고정 산수라
   태블릿 폭에서는 반칸에 안 들어가 행마다 라벨 폭·입력칸 시작점이 어긋났다.
   flex 로 라벨을 항상 180px 로 고정해 모든 행의 셀 간격을 통일한다 */
@media screen and (min-width:768px) and (max-width:1280.98px){
    .data-dv .dv-row{ display:flex;}
    .data-dv .dv-row > .hd{ flex:0 0 180px; width:180px; display:flex; align-items:center; justify-content:center; height:auto; min-height:60px;}
    .data-dv .dv-row > .bd{ flex:1; display:flex; align-items:center; flex-wrap:wrap;}
    .data-dv .dv-row .dv-grp{ flex:1 1 50%; min-width:0; display:flex; width:auto;}
    .data-dv .dv-row .dv-grp .hd{ flex:0 0 180px; width:180px; display:flex; align-items:center; justify-content:center; height:auto; min-height:60px;}
    .data-dv .dv-row .dv-grp .bd{ flex:1; width:auto; display:flex; align-items:center; flex-wrap:wrap;}
    /* flex 전환으로 인라인 공백이 사라져 숫자와 안내문이 붙는 것 방지 */
    .data-dv .dv-row .bd > * + *{ margin-left:8px;}
}

/* 다운로드 카드가 380px x3(+간격)=약 1200px 고정이라 태블릿 가로 컨테이너(1100px)에서
   셋째 카드(SAM Edition)가 잘렸다. 3등분 유동 폭으로 바꾼다 */
@media screen and (min-width:1024px) and (max-width:1280.98px){
    .down-slide .swiper-slide{ width:calc((100% - 60px)/3); margin-right:30px;}
    .down-slide .swiper-slide:last-child{ margin-right:0;}
    .down-slide .swiper-slide .box{ background-size:cover;}
}

/* 릴리즈노트 .inner 의 상하 패딩. 예전엔 JSP 인라인(padding:100px 0 0 0)이었는데,
   인라인·shorthand 는 태블릿용 좌우 여백 미디어쿼리를 덮어버려 제목이 화면 왼쪽 끝에 붙었다.
   상하만 지정해 좌우는 공용 규칙(데스크탑 0 / 태블릿 40px)을 따르게 한다.
   down.jsp 도 .inner.release-bx 를 쓰므로(기본 50/100 유지 필요) .down-bx 까지 붙여 릴리즈노트로 한정 */
.s-content .inner.down-bx.release-bx{ padding-top:100px; padding-bottom:0;}