@charset "utf-8";

/* #header:before {content: ''; position: absolute; top:var(--headT); left: 0; width: 100%; height: 1px; background: #ddd; opacity: 0; transition: .2s;}
#header.gnbOpen:before {opacity: 1;} */

/* #header.gnbOpen{ box-shadow:0 4px 1em rgba(0,0,0,.15);}
#header.gnbOpen:before{ background:#8198c9; opacity:.6;}
#header.gnbOpen .gnb_wrap .gnb > li{ height:auto;}
#header.gnbOpen .gnb_wrap .gnb .dp2{ padding:2em 0;} */
/* #header.gnbOpen .gnb_wrap .gnb > li .dp1 {padding: 0 2.5em;} */

/* header gnb dp2 */
/* #header .gnb_wrap .gnb > li .dp2{ display:block; max-width:9.25em; margin:0 auto; transition:.2s;}
#header .gnb_wrap .gnb > li .dp2 > li > a{ display:block; padding:.5em 1em; font-weight:300;}
#header .gnb_wrap .gnb > li .dp2 > li > a .tt{ font-size:1em;}
#header .gnb_wrap .gnb > li .dp3{ display:none;}
#header .gnb_wrap .gnb > li.act{ background:#f3feff;}
#header .gnb_wrap .gnb > li.act .dp1:after,
#header .gnb_wrap .gnb > li.on .dp1:after{ opacity:1;}
#header .gnb_wrap .gnb > li .dp2 > li.act > a,
#header .gnb_wrap .gnb > li .dp2 > li.on > a{ font-weight:400;} */


/* all_wrap original */
/* #header .all_wrap{ color:#000;}
#header .all_wrap .all{ width:4.5em;}
#header .all_wrap .all_btn{ position:relative; display:block; width:2.5em; height:1.125em; margin-left:auto;}
#header .all_wrap .all_btn .ham,
#header .all_wrap .all_btn .ham:before,
#header .all_wrap .all_btn .ham:after { display:block; width:100%; height:1px; background:#fff; transition:.2s, background 0s;}
#header .all_wrap .all_btn .ham:before,
#header .all_wrap .all_btn .ham:after { content:""; position:absolute; left:0;}
#header .all_wrap .all_btn .ham:before{ top:calc(50% - 1px); width:75%;}
#header .all_wrap .all_btn .ham:after { top:calc(100% - 2px); width:88%;}
#header .all_wrap .all_btn:hover .ham:before{ width:100%;}
#header .all_wrap .all_btn:hover .ham:after { width:100%;} */

/* #header .all_wrap .all_layer{ position:fixed; top:0; left:0; width:100%; height:100vh; opacity:0; visibility:hidden;}
#header .all_wrap .all_layer .all_close{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); opacity:0; backdrop-filter:blur(.75em);}
#header .all_wrap .all_layer .all_inner{ position:absolute; top:0; right:0; width:30em; max-width:100%; height:100%; background:#fff; box-shadow:-1em 0 1em rgba(0,0,0,.1); transform:translateX(100%);}
#header .all_wrap .all_layer .all_inner > .wrap_in{ gap:2em; padding:3em 3em;}

#header .all_wrap .all_layer .wrap_top a{ transition:.2s;}
#header .all_wrap .all_layer .wrap_top .all_logo{}
#header .all_wrap .all_layer .wrap_top .all_logo .in{ gap:0 1em; width:15em;}
#header .all_wrap .all_layer .wrap_top .all_logo .in img{ width:3.5em;}
#header .all_wrap .all_layer .wrap_top .all_logo .in .logo_tt{ font-size: 1.500em; font-weight: 600;}
#header .all_wrap .all_layer .wrap_top .all_mem{ gap:.25em; padding:1em 0;}
#header .all_wrap .all_layer .wrap_top .all_mem > li .in{ height:2.25em; padding:0 1em; border:1px solid #ddd; border-radius:.25em; line-height:normal;}
#header .all_wrap .all_layer .wrap_top .all_mem > li .in .tt{ font-size:.938em; font-weight:500;}
#header .all_wrap .all_layer .wrap_top .all_mem > li .in:hover{ background:var(--siteC); border-color:var(--siteC); color:#fff;}

#header .all_wrap .all_layer .wrap_middle{}
#header .all_wrap .all_layer .wrap_middle .gnb{ flex-wrap:wrap;}
#header .all_wrap .all_layer .wrap_middle .gnb > li{ flex:1 1 100%;}
#header .all_wrap .all_layer .wrap_middle .gnb > li.m_mypage{ display:block;}
#header .all_wrap .all_layer .wrap_middle .gnb ul.flex{ display:block;}
#header .all_wrap .all_layer .wrap_middle .gnb a{ position:relative; justify-content:flex-start; text-align:left !important; font-weight:500; transition:.2s;}
#header .all_wrap .all_layer .wrap_middle .gnb li.more{}
#header .all_wrap .all_layer .wrap_middle .gnb li.more > a.link{ display:none;}
#header .all_wrap .all_layer .wrap_middle .gnb li.more > a.layer{ display:flex !important; padding-right:2.5em;}
#header .all_wrap .all_layer .wrap_middle .gnb li.more > a .arrow{ position:absolute; right:1em; top:50%; transform:translateY(-50%); font-size:1em;}
#header .all_wrap .all_layer .wrap_middle .gnb li.more > a .arrow:before{ content:"\e943"; font-size:1.250em; display:block; transition:.2s;}
#header .all_wrap .all_layer .wrap_middle .gnb li.more > ul{ display:none;}
#header .all_wrap .all_layer .wrap_middle .gnb li.more.on > a .arrow:before{ transform:rotate(-180deg);}
#header .all_wrap .all_layer .wrap_middle .gnb li.more.on > ul{ display:block;}
#header .all_wrap .all_layer .wrap_middle .gnb ul{ padding:1em 1em;}
#header .all_wrap .all_layer .wrap_middle .gnb ul li > a{ padding:.875em .5em;}
#header .all_wrap .all_layer .wrap_middle .gnb ul li.more .arrow{ right:.5em;}
#header .all_wrap .all_layer .wrap_middle .gnb > li{}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1{ height:4em; padding:0 1.5em; border:solid var(--crGray); border-width:1px 0; margin-bottom:-1px;}
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt{ font-size:1.188em;}
#header .all_wrap .all_layer .wrap_middle .gnb > li.act .dp1,
#header .all_wrap .all_layer .wrap_middle .gnb > li.on .dp1{ background-image:var(--crGrad1); color:#fff;}
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a{ padding-left:1.5em;}
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a:before{ content:""; position:absolute; left:.75em; top:50%; width:.313em; height:.313em; background:var(--siteC2); border-radius:50%; transform:translateY(-50%);}
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a .tt{ font-size:1.063em;}
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li.act > a{ background:var(--crGray)}
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li.on > a{ color:var(--siteC); font-weight:600;}
#header .all_wrap .all_layer .wrap_middle .gnb .dp3{ background:var(--crGray2);}
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li > a{ color:#444;}
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li + li > a{ border-top:1px dashed #ddd;}
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li.act > a .tt,
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li.on > a .tt{ text-decoration:underline;} */

/* .allGnbOn{ overflow-y:hidden} 
.allGnbOn body{ overflow-y:scroll}
.allGnbOn #header .all_wrap .all_btn{ z-index:999; position:fixed; top:1em; right:1vw; width:3em; height:3em; filter:var(--crBlackfil) !important;}
.allGnbOn #header .all_wrap .all_btn .ham{ background:transparent !important; transition:0s;}
.allGnbOn #header .all_wrap .all_btn .ham:before,
.allGnbOn #header .all_wrap .all_btn .ham:after { width:100% !important; top:50% !important; height:2px;}
.allGnbOn #header .all_wrap .all_btn .ham:before{ transform:rotate(45deg);}
.allGnbOn #header .all_wrap .all_btn .ham:after { transform:rotate(-45deg);}
.allGnbOn #header .all_wrap .all_layer{ z-index:99; opacity:1; visibility:visible;}
.allGnbOn #header .all_wrap .all_layer .all_close{ opacity:1; transition:.4s;}
.allGnbOn #header .all_wrap .all_layer .all_inner{ transform:translateX(0); transition:.4s;} */

/* .scroll #header::after{ height:var(--headH); border-radius: 0; transition: all .5s;}
.scroll #header .top_wrap{z-index: -1;}
.scroll #header .top_wrap .search_wrap{ top: -100%; transition: position .3s;}
.scroll #header .menu_wrap{width: auto; position: absolute; left: 50%; top:1.625em; transform:translateX(-50%); transition: position .3s;} */

/* html.sub #header::after{ height:var(--headH); background: #fff;}
html.sub #header .top_wrap{z-index: -1;}
html.sub #header .top_wrap .search_wrap{ top: -100%; transition: all .3s; }
html.sub #header .menu_wrap{width: auto; position: absolute; left: 50%; top:1.625em; transform:translateX(-50%); }
html.sub #header .gnb_wrap .gnb > li .dp1 .tt{ color:#111;}
html.sub #header .all_wrap .all_btn .ham,
html.sub #header .all_wrap .all_btn .ham:before,
html.sub #header .all_wrap .all_btn .ham:after { background:#111;}
html.sub #header .all_wrap .all_btn{ filter:none!important;} */

/*  */


/* telephone product */
.membersN_wrap{ overflow:hidden}
.membersN_aniTit{ position:relative}
.membersN_aniTit.m1{ margin-top:2em}
.membersN_aniTit .tt{ position:absolute; left:0; width:100%; top:-.5em; white-space:nowrap; font-family:ns, serif; font-weight:700; line-height:1; opacity:.05; text-transform:uppercase}
.membersN_aniTit .tt .t1{  font-size:7em}
.membersN_aniTit .tt .t2{  font-size:5em}
.membersN_tit{ margin-bottom:1em}
.membersN_tit .t1{ font-weight:800; font-size:2.625em}
.membersN_tit:not(:first-child){ margin-top:5em}
.membersN{ display:flex; flex-wrap:wrap; position:relative; overflow:hidden}
.membersN > li{ width:100%}
.membersN > li .wrap_in{ position:relative}
.membersN > li .wrap_in .img_wrap{ width:66.66%; overflow:hidden}
.membersN > li .wrap_in .img_wrap .resize{ padding-bottom:66.66%}
.membersN > li .wrap_in .img_wrap .resize[onclick]{ cursor:pointer}
.membersN > li .wrap_in .img_wrap .resize[onclick]:after{ content:"\e97b"; font-family:xeicon; font-size:1.5em; width:2em; height:2em; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); border-radius:50%; opacity:0}
.membersN > li .wrap_in .img_wrap .resize[onclick]:hover{ box-shadow:0 0 5em rgba(0,0,0,.3) inset}
.membersN > li .wrap_in .img_wrap .resize[onclick]:hover:after{ opacity:1; transform:translate(-50%, -50%) scale(1.2); transition:.3s}
.membersN > li .wrap_in:not(.on) .img_wrap:hover .resize{ transform:scale(1.1); transition:1s}
.membersN > li .wrap_in .con_wrap{ position:absolute; right:0; bottom:0; width:33.33%; max-height:100%; box-sizing:border-box; padding:3.75em 0 0 3.75em; display:flex; flex-direction:column; gap:2em 0}
.membersN > li .wrap_in .con_wrap .grow{ flex:1 1 0%; min-height:0; display:flex; flex-direction:column}
.membersN > li .wrap_in .con_wrap .scrollst{ padding:1.25em; background:#f5f5f5}
.membersN > li .wrap_in .con_wrap .tit_wrap{ display:flex; flex-direction:column; gap:.5em}
.membersN > li .wrap_in .con_wrap .name{ font-family: 'notoSerif', serif; font-weight:700; font-size:2.5em; color:#6b4a1b}
.membersN > li .wrap_in .con_wrap .subject{ color:#42454d; font-size:1.375em}
.membersN > li .wrap_in .con_wrap .info{ position:relative}
.membersN > li .wrap_in .con_wrap .info .tit{ font-family: 'notoSerif',serif;  font-size:1.25em; margin-bottom:.5em; padding:0 .5em}
.membersN > li .wrap_in .con_wrap .info .list > li{ color:#555}
.membersN > li .wrap_in .con_wrap .info .list > li:not(.point){ margin-bottom:.75em; position:relative; padding-left:.75em}
.membersN > li .wrap_in .con_wrap .info .list > li:not(.point):before{ content:"·"; position:absolute; left:0; top:0}
.membersN > li .wrap_in .con_wrap .info .list > li:last-child{ margin-bottom:0}
.membersN > li .wrap_in .con_wrap .info .list > li.point{ margin-bottom:.75em; font-weight:700; font-size:1.063em}

.membersN.type1{ margin:-2em}
.membersN.type1 > li{ width:50%}
.membersN.type1 > li .wrap_in{ margin:2em}
.membersN.type1 > li .wrap_in .img_wrap{ width:55%}
.membersN.type1 > li .wrap_in .img_wrap .resize{ padding-bottom:150%}
.membersN.type1 > li .wrap_in .con_wrap{ width:45%; padding:2em 0 0 2em}
.membersN.type1 > li .wrap_in .con_wrap .tit_wrap{ font-size:.875em; line-height:1.1}
.membersN.type1 > li .wrap_in .con_wrap .subject{ font-size:1.5em}

.membersN.type2{ margin:-1.5em -.75em}
.membersN.type2 > li{ width:25%}
.membersN.type2 > li .wrap_in{ margin:1.5em .75em; overflow:hidden}
.membersN.type2 > li .wrap_in .img_wrap{ width:100%; position:relative}
.membersN.type2 > li .wrap_in .img_wrap .resize{ padding-bottom:150%}
.membersN.type2 > li .wrap_in .con_wrap{ position:relative; width:100%; padding:.75em .25em; gap:1em 0}
.membersN.type2 > li .wrap_in .con_wrap:not(.layer) .grow{ flex:none}
.membersN.type2 > li .wrap_in .con_wrap .scrollst{ height:4em; background:none; border:1px solid #eee}
.membersN.type2 > li .wrap_in .con_wrap .scrollst::-webkit-scrollbar-thumb{ background:#aaa}
.membersN.type2 > li .wrap_in .con_wrap .tit_wrap{ position:relative; display:flex; flex-direction:row; align-items:flex-end; font-size:.75em; padding-right:3.5em; flex-wrap:wrap}
.membersN.type2 > li .wrap_in .con_wrap .tit_wrap .more{ position:absolute; left:0; top:0; width:100%; height:100%; display:flex; justify-content:flex-end; align-items:center}
.membersN.type2 > li .wrap_in .con_wrap .tit_wrap .more .xi{ font-size:1em; width:3em; line-height:3em; border-radius:50%; border:1px solid #ddd; text-align:center; color:#999; transition:.5s}
.membersN.type2 > li .wrap_in .con_wrap .tit_wrap .more .xi:before{content:"\e913"; font-size:1.75em}
.membersN.type2 > li .wrap_in .con_wrap .tit_wrap .subject{font-size:1.5em}
.membersN.type2 > li .wrap_in.on .con_wrap .tit_wrap .more .xi{ background:#aaa; color:#fff}
.membersN.type2 > li .wrap_in.on .con_wrap .tit_wrap .more .xi:before{ content:"\e91a"}
.membersN.type2 > li .wrap_in:not(.on) .con_wrap .tit_wrap .more:hover .xi{ transform:rotate(360deg)}
.membersN.type2 > li .wrap_in .con_wrap.layer{ position:absolute; left:100%; top:0; width:100%; height:100%; padding:2em; backdrop-filter:blur(1em); color:#fff; transition:.3s}
.membersN.type2 > li .wrap_in .con_wrap.layer:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.3)}
.membersN.type2 > li .wrap_in .con_wrap.layer .scrollst{ height:auto; border:none; background:rgba(0,0,0,.1)}
.membersN.type2 > li .wrap_in .con_wrap.layer .info .list > li{ color:#fff}
.membersN.type2 > li .wrap_in.on .con_wrap.layer{ left:0}

.membersN.type2.st1{ margin:-1em -.5em}
.membersN.type2.st1 > li{ width:33.33%}
.membersN.type2.st1 > li .wrap_in{ margin:1em .5em}
.membersN.type2.st1 > li .wrap_in .con_wrap .tit_wrap{ font-size:.688em}
.membersN.type2.st1 > li .wrap_in .con_wrap .tit_wrap .name{ color:#333}

.membersN.typePop,
.membersN.typePop > li{ height:100%}
.membersN.typePop > li .wrap_in{ display:flex; align-items:center; height:100vh}
.membersN.typePop > li .wrap_in .img_wrap{ width:auto; height:100%}
.membersN.typePop > li .wrap_in .img_wrap img{ height:100%}
.membersN.typePop > li .wrap_in .con_wrap{ position:relative; flex:1 1 0; min-width:0; max-height:90%; font-size:1.25em}
.membersN.typePop > li .wrap_in .con_wrap .tit_wrap{ position:relative; display:flex; flex-direction:row; align-items:flex-end}

.membersN_tab{ margin:-.25em; position:sticky; top:5em; padding-top:.5em}
.membersN_tab{ display:flex; flex-wrap:wrap}
.membersN_tab > li{ width:50%}
.membersN_tab > li > a{ position:relative; display:flex; align-items:center; justify-content:center; margin:.25em; height:3em; box-sizing:border-box; border:1px solid #ddd; color:#666; border-radius:.25em; overflow:hidden}
.membersN_tab > li > a:before{ content:""; position:absolute; left:0; transform:scaleX(0); top:0; width:100%; height:100%; box-sizing:border-box; background: linear-gradient(-45deg, #093168 0%, #1e59ab 100%); transition:.3s}
.membersN_tab > li > a .tt{ position:relative; font-size:1.063em; font-weight:600}
.membersN_tab > li:hover > a,
.membersN_tab > li.on > a{ color:#fff; border-color:transparent}
.membersN_tab > li:hover > a:before,
.membersN_tab > li.on > a:before{ transform:scaleX(1)}

.memberN_branch{ position:relative; display:flex; align-items:flex-start; gap:0 4em; margin-top:6em}
.memberN_branch .tabW{ width:20em}
.memberN_branch .conW{ flex:1 1 0%; min-width:0}

.gsClass.move{ opacity:0; transition:1s}
.gsClass.move.left{ transform:translateX(-100%)}
.gsClass.move.right{ transform:translateX(100%)}
.gsClass.move.top{ transform:translateY(100%)}
.gsClass.on.move{ transform:translate(0); opacity:1}
.gsClass.tit{ overflow:hidden}
.gsClass.tit > i{ transform:translateY(100%); transition:1s}
.gsClass.tit.on > i{ transform:translateY(0)}
.gsList > li{ opacity:0; transition:1s}
.gsList > li.on{ opacity:1}
.gsList.scale > li{ transform:scale(.9);}
.gsList.scale  > li.on{ transform:scale(1);}
.gsList.top > li{ transform:translateY(50%)}
.gsList.top > li.on{ transform:translateY(0)}
.gsList > li:nth-child(2){ transiton-delay:.2s}
.gsList > li:nth-child(3){ transiton-delay:.4s}
.gsList > li:nth-child(4){ transiton-delay:.6s}
.gsList > li:nth-child(5){ transiton-delay:.8s}
 


/* vod player */
.video-player {}
.video-player .video { width:60em; height: 33.75em; margin:0 auto; border-radius: 3em; overflow: hidden;/*  box-shadow: 6px 6px 1px var(--siteC2); */}
.video-player .video iframe{display: block; width: 100%; height: 100%;}