/* layout common */
html{scroll-behavior:smooth}
body{overflow-x:hidden; font-size:16px; font-family:'Noto Sans Korean', sans-serif; color:#333;}
*::-webkit-scrollbar {width:8px; height:8px; background-color:#373b44}
*::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.15); background-color:#373b44}
*::-webkit-scrollbar-thumb {background-color:#da2744}
body.is-fixed{overflow:hidden}
a{color:#333; text-decoration:none}
@media screen and (max-width:1440px){
    html,body{font-size:14px}
}
@media screen and (max-width:768px){
    html,body{font-size:12px}
}


.wrapper{width:100%; height:auto; overflow:hidden}
.wrap{margin:0 auto; max-width:1200px}
@media screen and (max-width:1280px){
    .wrap{max-width:1024px; padding:0 1.5em}
}
.scrollDisable{position:fixed; width:100%; height:100%; overflow:hidden !important; touch-action:none;}

/* ie background fixed error script */
@supports (-ms-ime-align:auto)
{
    html{
        overflow: hidden;
        height: 100%;
    }
    body{
        overflow: auto;
        height: 100%;
        position: relative;
    }
}

/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
    html{
        overflow: hidden;
        height: 100%;
    }
    body{
        overflow: auto;
        height: 100%;
    }
}

/* header
-----------------------------------------------*/
.header{z-index:300; position:fixed; top:0; left:0; width:100%; height:72px; background:rgba(0,0,0,.2); transition:background 300ms}
.header-inn{position:relative; display:flex; padding:0 1em; height:100%}
.header__logo{position:absolute; left:1em; top:50%; transform:translateY(-50%);}
.header__logo a{display:block; width:150px; height:40px; background:url(/assets/img/common/top_logo.png) 0 0 no-repeat; background-size:100%; cursor:pointer;}
@media screen and (max-width:1280px){
    .header__logo{left:.5em}
}
@media screen and (max-width:599px){
    .header{height:60px}
}

/* gnb
-----------------------------------------------*/
.header__bg{z-index:-1; display:none; position:absolute; left:0; top:0; width:100%; height:480px; background:#fff; box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);}
.header__bg > *{position:absolute;}
.header__bg-left{bottom:0; left:0; width:355px; height:154px;}
.header__bg-left div{position:absolute; bottom:0; left:-100%;}
.header__bg-left div:nth-child(1){z-index:1; width:355px; height:154px; background:url(/assets/img/common/bg_header_left2.png) center no-repeat}
.header__bg-left div:nth-child(2){z-index:0; width:277px; height:277px; background:url(/assets/img/common/bg_header_left1.png) center no-repeat}
.header__bg-right{bottom:0; right:0; width:340px; height:340px; background:url(/assets/img/common/bg_header_right.png) 0 0 no-repeat}
.header__gnb{display:inline-block; margin:0 auto;}
.header__gnb-list{display:flex; height:100%}
.header__gnb__depth1-item{position:relative; padding:0 2.5em; height:100%; display:flex;}
.header__gnb__depth1-link{display:flex; align-items:center; height:100%; color:#fff; font-size:1.125rem; font-weight:500}
.header__gnb__depth2-list{opacity:0; visibility:hidden; position:absolute; top:100%; left:0; padding-left:2.5em; width:100%; height:400px !important; transition:opacity 300ms}
.header__gnb__depth2-item{padding-top:1.25em}
.header__gnb__depth2-link{color:#333}
.header__gnb__depth2-link:hover{color:#da2744; font-weight:700}

.header__gnb.is-hover .header__gnb__depth2-list{opacity:1; visibility:visible}
#gnb_line{position:absolute; bottom:0; background:#fff; height:3px;}
@media screen and (max-width:1280px){
    .header__gnb__depth1-item{padding:0 1.8em}
    .header__gnb__depth2-list{padding-left:1.8em}
}
@media screen and (max-width:1023px){
    .header__gnb{display:none}
}

/* header right */
.header-right{position:absolute; right:1em; top:50%; transform:translateY(-50%); display:flex;}
/* header right lang select */
.select-wrap{position:relative; transform:translateY(4px); color:#fff; cursor:pointer}
.select-wrap .select .fa-chevron-down{transform:translateY(-1px); margin-left:5px; font-size:12px; transition:transform 300ms}
.select-scroll{position:absolute; display:none; top:150%; left:0; width:100%; background:#fff; text-align:center}
.select-scroll li{padding:1em; background:#fff; font-weight:300; font-size:.85rem; color:#999; text-transform:uppercase; transition:color 300ms, background 300ms}
.select-scroll li:hover{color:#333; background:rgba(0,0,0,.05)}
.select-scroll li.is-active{color:#333}
@media screen and (max-width:599px){
    .select-wrap{display:none}

}
/* header right sitebar open*/
.header__hamburger{display:flex; flex-direction:column; margin-left:1.5em; width:2em; height:2em; overflow:hidden; cursor:pointer}
.header__hamburger .bar{position:relative; margin:auto; width:100%; height:2px; background:#fff;}
.header__hamburger .bar:before{content:''; position:absolute; left:-100%; top:0; width:100%; height:100%; background:#d81f36; transition:left 150ms}
.header__hamburger .bar:nth-child(2):before{transition-duration:300ms}
.header__hamburger .bar:nth-child(3):before{transition-duration:450ms}
.header__hamburger:hover .bar:before{left:0}
@media screen and (max-width:599px){
    .header__hamburger{height:2.5em; width:2.25em}
}

/* header - hover */
.header.is-hover{background-color:#fff;}
.header.is-hover .header-inn{border-bottom:1px solid rgba(0,0,0,.1)}
.header.is-hover .header__logo a{background-image:url(/assets/img/common/top_logo_color.png)}
.header.is-hover .header__bg{}
.header.is-hover #gnb_line{background:#da2744}
.header.is-hover .header__gnb__depth1-link{color:#333}
.header.is-hover .header__gnb__depth1-item.is-active .header__gnb__depth1-link{color:#da2744}
.header.is-hover .select-wrap{color:#333}
.header.is-hover .header__hamburger .bar{background-color:#333}
/* header - scroll */
.header.is-scroll{background-color:#fff}
.header.is-scroll .header-inn{border-bottom:1px solid rgba(0,0,0,.1)}
.header.is-scroll .header__logo a{background-image:url(/assets/img/common/top_logo_color.png)}
.header.is-scroll #gnb_line{background:#da2744}
.header.is-scroll .header__gnb__depth1-link{color:#333}
.header.is-scroll .header__gnb__depth1-item.is-active .header__gnb__depth1-link{color:#da2744}
.header.is-scroll .select-wrap{color:#333}
.header.is-scroll .header__hamburger .bar{background-color:#333}

/* sidebar */
.sidebar{display:none; z-index:999; position:fixed; left:0; top:0; width:100vw; height:100vh;}
.sidebar.mobile{display:none}
.sidebar-close{z-index:1; opacity:0; position:absolute; right:2.1em; top:17px; width:2em; height:2em; cursor:pointer}
.sidebar-close .bar{position:absolute; left:0; top:50%; width:100%; height:2px; background:#fff; transition:transform 300ms}
.sidebar-close .bar:nth-child(1){transform:rotate(43deg);}
.sidebar-close .bar:nth-child(2){transform:rotate(-43deg); transition-duration:400ms}
.sidebar-close:hover .bar:nth-child(1){transform:rotate(180deg);}
.sidebar-close:hover .bar:nth-child(2){transform:rotate(180deg);}
.sidebar-inn{opacity:0; position:relative; padding:5em 5em 2em; width:70vw; height:100vh; margin-left:auto;}
.sidebar__bg-left{z-index:-1; position:absolute; left:0; top:0; width:0; height:100%; background:url(/assets/img/common/bg_sidebar.png) center no-repeat; background-size:cover}
.sidebar__bg-right{z-index:-1; position:absolute; right:0; top:0; width:0; height:100%; background:#302840}
.sidebar__lang{display:none}
.sidebar__gnb.mobile{display:none}
.sidebar__gnb-list:after{content:''; display:block; clear:both}
.sidebar__gnb__depth1-item{float:left; width:calc(100% / 3.1); min-height:330px; height:43vh}
.sidebar__gnb__depth1-item:nth-child(n + 4){margin-top:3em}
.sidebar__gnb__depth1-link{color:#fff; font-size:1.875rem; font-weight:700}
.sidebar__gnb__depth2-list{margin-top:1.5em}
.sidebar__gnb__depth2-item + *{margin-top:.5em;}
.sidebar__gnb__depth2-link{position:relative; display:inline-block; padding-bottom:7px; color:rgba(255,255,255,.5); overflow:hidden}
.sidebar__gnb__depth2-link:before{content:''; position:absolute; bottom:0; left:0; width:100%; height:0; background:#da2744; transition:height 300ms}
.sidebar__gnb__depth2-link:hover:before{height:3px}
.sidebar__gnb__depth2-link:hover{color:#da2744}
.sidebar__gnb__depth2-link:hover:before{left:0}
.sidebar__menu{position:absolute; left:5em; right:5em; bottom:0; padding-top:2em; padding-bottom:2em; border-top:1px solid rgba(255,255,255,.3)}
.sidebar__menu ul{display:flex;}
.sidebar__menu li + li{margin-left:2em}
.sidebar__menu-link{position:relative; display:inline-block; padding-bottom:7px; overflow:hidden; color:#fff;}
.sidebar__menu-link:before{content:''; position:absolute; bottom:0; left:0; width:100%; height:0; background:#da2744; transition:height 300ms}
.sidebar__menu-link:hover:before{height:3px}
.sidebar__menu-link strong{font-weight:700}
@media screen and (max-width:1023px){
    .sidebar{display:block; left:inherit; right:0; width:0; background:#fff; overflow:hidden; transition:width 300ms}
    .sidebar.is-active{display:block !important; width:100%}
    .sidebar.is-active .sidebar-inn{opacity:1 !important }
    .sidebar-close{opacity:1; right:1em; top:1em;}
    .sidebar-close .bar{background:#333}
    .sidebar__bg-left,
    .sidebar__bg-right{display:none;}
    .sidebar-inn{padding:2em 0 2em 2em; width:100vw; overflow:auto}
    .sidebar__lang{position:absolute; display:block; top:1em; left:2em;}
    .sidebar__lang-item{position:relative; margin-right:2em; font-size:1.15rem; font-weight:700; color:#999}
    .sidebar__lang-item.is-active{color:#333; border-bottom:2px solid #333}
    .sidebar__lang-item:after{position:absolute; right:-1em; top:7px; content:''; display:inline-block; width:1px; height:10px; background:#ccc}
    .sidebar__lang-item:last-child:after{display:none;}
    .sidebar__gnb.pc{display:none}
    .sidebar__gnb.mobile{display:block}
    .sidebar__gnb-list{margin-top:1em}
    .sidebar__gnb__depth1-item{float:none; width:100%; height:inherit; min-height:inherit}
    .sidebar__gnb__depth1-item:nth-child(n + 4){margin-top:0}
    .sidebar__gnb__depth1-link{display:block;padding:1em 2em 1em 0;font-weight:400;font-size:1.5rem;color:#333;background:url(/assets/img/common/more-off.png) 95% center no-repeat;border-bottom:1px solid #ddd;}
    .sidebar__gnb__depth1-link.is-active{background-image:url(/assets/img/common/more-on.png); border-color:#fff; color:#da2744}
    .sidebar__gnb__depth1-item.is-active .sidebar__gnb__depth1-link{color:#da2744}
    .sidebar__gnb__depth2-list{display:none; background:#eee; margin-top:0}
    .sidebar__gnb__depth2-item + *{margin-top:0; border-top:1px solid #ddd}
    .sidebar__gnb__depth2-link{display:block; padding:1em; color:#333; font-size:1.15rem;}
    .sidebar__menu{display:none}
}

/* footer
-----------------------------------------------*/
.footer{position:relative; z-index:200; background:#373b44}
.footer-top .wrap:after{content:''; display:block; clear:both}
.footer__menu{float:left; display:flex; align-items:center; height:80px}
.footer__menu li{display:flex}
.footer__menu li + li{margin-left:2em}
.footer__menu-link{position:relative; display:block; font-size:1.125rem; color:#fff;}
.footer__menu-link:before{content:''; opacity:.7; position:absolute; bottom:-4px; width:100%; height:0; background:#fff; transition:height 300ms}
.footer__menu-link:hover:before{height:3px}
.footer__menu-link strong{font-weight:500}
.social__menu{float:right; display:flex; min-width:310px; width:30%; height:80px}
.social__menu > *{display:block; margin-top:auto; margin-bottom:auto; color:#fff}
.social__menu .btn__youtube{padding:1.7em 2em 0; border-left:1px solid rgba(255,255,255,.3); border-right:1px solid rgba(255,255,255,.3); height:100%}
.social__menu .btn__company{display:flex; align-items:center; padding:0 1em; font-size:1.125rem}
.social__menu .btn__company svg{margin-left:.5em; transition:transform 300ms}
.social__menu .btn__company:hover svg{transform:rotate(180deg)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.3)}
.footer-bottom .wrap{display:flex; height:135px;}
.footer-bottom .wrap > *{margin-top:auto; margin-bottom:auto;}
.footer__logo{margin-right:5em; width:120px; height:55px; background:url(/assets/img/common/footer_logo.png) center no-repeat; background-size:100%;}
.footer__addr{opacity:.4; height:3em; font-weight:300; color:#fff;}
.footer__addr p + p{margin-top:.5em}
@media screen and (max-width:1280px){
    .social__menu .btn__company{padding:0 .5em}
}
@media screen and (max-width:1024px){
    .social__menu .btn__company{padding-left:1em}
}
@media screen and (max-width:768px){
    .footer .wrap{padding:0}
    .footer__menu,
    .social__menu{float:none; width:100%}
    .footer__menu{flex-wrap:wrap; justify-content:center}
    .footer__menu li{}
    .social__menu{height:55px; border-top:1px solid rgba(255,255,255,.3);}
    .social__menu > *{width:100%; text-align:center}
    .social__menu .btn__youtube{padding-top:13px; border-left:0;}
    .social__menu .btn__company{justify-content:center}
    .footer__logo{display:none}
    .footer-bottom .wrap{height:inherit; padding:1.5em 0 1.3em}
    .footer__addr{width:100%;  text-align:center}
}

.company__list{display:none; position:absolute; bottom:100%; left:0; right:0; padding:3em 0; background:#fff; box-shadow:-10px 0 10px 0 rgba(0,0,0,.15)}
.company__list > .wrap{display:flex; justify-content:space-between}
.company__list-item{width:calc((100% / 7) - 1.5em)}
.company__list-item dt{margin-bottom:1.25em; padding-bottom:1em; border-bottom:1px solid #333; font-size:1.125rem; font-weight:700}
.company__list-item dd + dd{margin-top:1em}
.company__list-item dd,
.company__list-item a{color:#333; transition:color 200ms}
.company__list-item dd:hover,
.company__list-item dd:hover *{color:#da2744}
@media screen and (max-width:1024px){
    .company__list > .wrap{display:block; padding:0 1em}
    .company__list > .wrap:after{content:''; display:block; clear:both}
    .company__list-item{float:left; width:calc((100% / 4) - 1.5em); min-height:280px; margin-right:calc((1.5em * 4) / 3)}
    .company__list-item:nth-child(4n){margin-right:0}
}
@media screen and (max-width:599px){
    .company__list-item{min-height:210px; width:calc((100% / 3) - 1em); margin-right:calc((1em * 3) / 2)}
    .company__list-item:nth-child(3n){margin-right:0}
    .company__list-item:nth-child(4n){margin-right:calc((1em * 3) / 2)}
    .company__list-item:nth-child(7),
    .company__list-item:nth-child(8){margin:0; width:calc((100% / 2) - .75em)}
    .company__list-item:nth-child(8){margin-left:1.5em}
    .company__list-item dd + dd{margin-top:5px}
}

/* common
-----------------------------------------------*/
.container.sub{min-height:calc(100vh - 216px)}
.rotate-img img{animation:rotate 40s linear infinite}
@keyframes rotate{
    from{transform:rotate(0)}
    to{transform:rotate(360deg)}
}
@media screen and (max-width:1023px){
    .rotate-img img{animation:none}
}

/* button */
.btn{z-index:0; position:relative; display:inline-block; padding:.75em 1.5em; overflow:hidden; background:#333; color:#fff; cursor:pointer; transition:background 300ms, box-shadow 300ms, color 300ms}
.btn:hover,
.btn:focus,
.btn:active{outline:0; text-decoration:none;}
.btn:before{z-index:0; content:''; position:absolute; left:-100%; top:0; height:100%; width:100%; background:#252525; transition:left 300ms}
.btn:hover{box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);}
.btn:hover:before{left:0}
.btn:hover svg{transform:scale(1.15) translate(4px,-1px)}
.btn span{position:relative; z-index:1;}
.btn svg{font-size:12px; transform:translateY(-2px); transition:transform 300ms}
.btn.wd100{display:block}

.btn.btn--big{padding:1.25em 3em}

.btn.color--red{background:#d81f36}
.btn.color--gray1{background:#302840}
.btn.color--gray2{background:#6e6879}
.btn.color--gray3{background:#97939f}

.btn.line{background:transparent; border:2px solid #333;}
.btn.line:before{background:#333;}
.btn.line:hover{color:#333}
.btn.line--red{border-color:#d81f36; color:#d81f36}
.btn.line--red:before{background:#d81f36}
.btn.line--red:hover{color:#fff}


/* css icon */
.css--plus{position:relative; display:block; width:30px; height:30px}
.css--plus .bar{position:absolute; left:0; top:50%; width:100%; height:2px; background:#fff; transition:transform 300ms}
.css--plus .bar:nth-child(1){transform:rotate(0);}
.css--plus .bar:nth-child(2){transform:rotate(-90deg); transition-duration:400ms}


/* newscard */
.newscard{display:flex; justify-content:space-between}
.newscard:after{content:''; display:block; clear:both}
.newscard.item2 .newscard-item{width:calc(100% / 2)}
.newscard.item3 .newscard-item{width:calc(100% / 3)}
.newscard.item4 .newscard-item{width:calc(100% / 4)}
.newscard.item5 .newscard-item{width:calc(100% / 5)}
.newscard.item6 .newscard-item{width:calc(100% / 6)}
.newscard-item{height:240px; background:#fff; transition:box-shadow 300ms, background 300ms; cursor:pointer;}
.newscard-item > a{display:flex; flex-direction:column; padding:1.5em; height:100%}
.newscard-item + *{margin-left:2em}
.newscard-item:hover{background:#d81f36; box-shadow:0 0 10px 1px rgba(0,0,0,.2)}
.newscard-item:hover > *{color:#fff;}
.newscard-item > *{transition:color 300ms}
.newscard-item .title{margin:auto 0; font-size:1.5rem; font-weight:400; line-height:1.4; word-break:keep-all}
.newscard-item .date{opacity:.5}
@media screen and (max-width: 1023px){
    .newscard-item .title{font-size:1.35rem}
}
@media screen and (max-width:599px){
    .newscard{display:block}
    .newscard-item{float:left; width:calc(50% - .5em) !important; height:180px;}
    .newscard-item + *{margin-left:0;}
    .newscard-item:nth-child(even){margin-left:1em}
    .newscard-item:nth-child(n + 3){margin-top:1em}
    .newscard-item .group,
    .newscard-item .date{font-size:1.167rem}
    .newscard-item .title{height:5.5em; overflow:hidden}
}


/* img card list */
.sub__title + .card__list{margin-top:-1.5em}
.card__list{}
.card__list:after{content:''; display:block; clear:both}
.card__list-item{float:left;}
.card__list.column2 .card__list-item{margin-top:1.5em; margin-right:1.5em; width:calc((100% / 2) - 1em)}
.card__list.column2 .card__list-item:nth-child(2n){margin-right:0}
.card__list.column3 .card__list-item{margin-top:1.5em; margin-right:1.5em; width:calc((100% / 3) - 1em)}
.card__list.column3 .card__list-item:nth-child(3n){margin-right:0}
.card__list.column4 .card__list-item{margin-top:1.5em; margin-right:calc((1em * 4) / 3); width:calc((100% / 4) - 1em)}
.card__list.column4 .card__list-item:nth-child(4n){margin-right:0}
.card__list.column5 .card__list-item{margin-top:1.5em; margin-right:calc((1em * 5) / 4); width:calc((100% / 5) - 1em)}
.card__list.column5 .card__list-item:nth-child(5n){margin-right:0}
@media screen and (max-width:900px){
    .card__list.column3 .card__list-item,
    .card__list.column5 .card__list-item{width:calc((100% / 2) - 1em); margin-top:2em; margin-right:2em}
    .card__list.column3 .card__list-item:nth-child(3n),
    .card__list.column5 .card__list-item:nth-child(5n){margin-right:2em}
    .card__list.column3 .card__list-item:nth-child(2n),
    .card__list.column5 .card__list-item:nth-child(2n){margin-right:0}
}
@media screen and (max-width:599px){
    .card__list.column2 .card__list-item,
    .card__list.column3 .card__list-item,
    .card__list.column5 .card__list-item{width:100%; margin-top:2em; margin-right:0}
    .card__list.column2 .card__list-item:nth-child(2n),
    .card__list.column3 .card__list-item:nth-child(3n),
    .card__list.column5 .card__list-item:nth-child(5n){margin-right:0}
    .card__list.column3 .card__list-item:nth-child(2n){margin-right:0}
}

/* description__list */
.description__list{}
.description__list dt{font-weight:700}
.description__list dd{}
.description__list.list--horizon{display:flex}


/* layer-popup */
.layer-bg{display:none; z-index:1000; position:fixed; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,.7); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px)}
.layer{display:none; z-index:1001; position:fixed; top:50%; left:50%; width:55%; transform:translate(-50%, -50%); background:#fff}
.layer__close{position:absolute; right:-50px; top:-50px; width:50px; height:50px; cursor:pointer}
.layer__close span{position:absolute; bottom:25px; left:0; display:block; width:100%; height:3px; background:#fff; transition:transform 300ms, background 300ms}
.layer__close span:first-child{transform:rotate(45deg)}
.layer__close span:last-child{transform:rotate(-45deg)}
.layer__close:hover span{background:#da2744}
.layer__close:hover span:first-child{transform:rotate(-45deg)}
.layer__close:hover span:last-child{transform:rotate(45deg)}
.layer__cont{padding:3em 4em; max-height:700px; overflow:auto}
.layer__cont::-webkit-scrollbar {width:8px; height:8px; background-color:#373b44}
.layer__cont::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.15); background-color:#373b44}
.layer__cont::-webkit-scrollbar-thumb {background-color:#da2744}
.layer__cont-title{margin-bottom:1em; padding-bottom:1em; border-bottom:1px solid #ccc}
.layer__cont-title h4{font-size:2.750rem; font-weight:700; color:#da2744}
.layer__cont-title p{margin-top:.5em; padding:0 5px; font-size:1.125rem; word-break:keep-all}
.layer__cont-title p strong{font-size:1.875rem}
.layer__cont-title + .layer__cont-sec{padding-top:.75em}
.layer__cont-sec{padding:1.5em 0}
.layer__cont-sec:last-child{border-bottom:0}
.layer__cont-sec-tit{margin-bottom:10px; font-size:1.5rem; font-weight:700}
.layer__cont-sec-msg{word-break:keep-all; font-size:1.125rem}
.layer__cont-sec-msg + .layer__cont-sec-msg{margin-top:1em}
@media screen and (max-width:1024px){
    .layer{width:85%}
    .layer__cont{padding:1em 2em}
}
@media screen and (max-width:599px){
    .layer{left:0; top:0; transform:none; width:100%; height:100%; overflow:auto; text-align:right}
    .layer__close{position:relative; top:5px; right:5px; width:30px; height:30px}
    .layer__close span{bottom:15px; background:#333}
    .layer__cont{padding:1em; max-height:inherit; overflow:hidden; text-align:left}
}

/* table */
.tbl-basic{width:100%; border-top:1px solid #333}
.tbl-basic th,
.tbl-basic td{padding:0 10px; height:60px; vertical-align:middle}
.tbl-basic th{background:#f8f8f8;}
.tbl-basic td{border-top:1px solid #ddd; border-bottom:1px solid #ddd}


/* tab */
.tab{width:100%; margin-bottom:1em;}
.tab:after{content:''; display:block; clear:both;}
.tab__item{position:relative; display:block; padding-bottom:.5em; float:left; font-size:1.6rem; font-weight:700; color:#999; text-align:center; cursor:pointer; transition:all 300ms;}
.tab__item:before{content:''; position:absolute; bottom:0; left:0; width:0; height:4px; background:#d81f36; transition:width 300ms}
.tab__item + .tab__item{margin-left:2em}
.tab__item:hover{color:#333}
.tab__item:hover:before{width:100%;}
.tab__item.is-active{color:#333}
.tab__item.is-active:before{width:100%}
.tab.tab--item2 .tab__item{width:calc(100% / 2)}
.tab.tab--item3 .tab__item{width:calc(100% / 3)}
.tab.tab--item4 .tab__item{width:calc(100% / 4)}

.tab__content-inn{height:0; overflow:hidden}
.tab__content-inn.is-active{height:auto}

.tab.tab--btn{border:1px solid #ddd; border-bottom:0; border-left:0}
.tab.tab--btn .tab__item{margin-left:0; height:60px; line-height:60px; border-bottom:1px solid #ddd; border-left:1px solid #ddd; background:#f3f3f3; color:#333; font-size:1.125rem}
.tab.tab--btn .tab__item:before{display:none}
.tab.tab--btn .tab__item.is-active{border-left-color:#d81f36; background:#d81f36; color:#fff}


/* img slide */
.img-slide{width:100%}
.img-slide .thumb{position:relative; background-position:center; background-repeat:no-repeat; background-size:cover}
.img-slide .slick-list{overflow:visible}
.img-slide .slick-slide{opacity:.3; outline:0}
.img-slide .slick-slide.slick-current{opacity:1}
.img-slide .slick-dots{margin-top:1.5em; text-align:center}
.img-slide .slick-dots li,
.img-slide-small .slick-dots li{display:inline-block;}
.img-slide .slick-dots li + li,
.img-slide-small .slick-dots li + li{margin-left:.75em}
.img-slide .slick-dots button,
.img-slide-small .slick-dots button{width:15px; height:15px; border-radius:50%; background:#ddd; color:transparent;}
.img-slide .slick-dots .slick-active button,
.img-slide-small .slick-dots .slick-active button{background:#d81f36}
@media screen and (max-width:1280px){
    .img-slide .slick-slide{opacity:0}
}
@media screen and (max-width:599px){
    .img-slide .slick-dots button,
    .img-slide-small .slick-dots button{width:12px; height:12px}
}

.img-slide-small{max-width:500px}
.img-slide-small,
.img-slide-small .slick-track,
.img-slide-small .thumb img{width:100%}
.img-slide-small .slick-dots{margin-top:.5em; text-align:center}

/* thumb list - recrut */
.thumb__list:after,
.thumb__list-item:after{content:''; display:block; clear:both}
.thumb__list-item{position:relative; height:340px}
.thumb__list-item + .thumb__list-item{margin-top:3em}
.thumb__list-img{width:55%; height:100%; background-position:center; background-repeat:no-repeat; background-size:cover}
.thumb__list-txt{z-index:1; position:absolute; top:12.5%; right:5%; padding:0 3em; display:flex; flex-direction:column; width:45%; height:75%; background:#f2f2f2;}
.thumb__list-txt .title{margin-top:auto; font-size:1.875rem; font-weight:700}
.thumb__list-txt .title strong{font-size:2.875rem; color:#d81f36}
.thumb__list-txt .title span{font-size:1.125rem; color:#999; font-weight:400}
.thumb__list-txt .text{margin-top:.5em; margin-bottom:auto; font-size:1.125rem; word-break:keep-all}

/* vod */
.vod-wrap{position:relative; height:50vh}
.vod-wrap .vod-btn{z-index:5; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80px; height:80px; background:url(/assets/img/common/btn-play.png) center no-repeat}
.vod-wrap .vod-btn span{color:transparent; font-size:0; text-indent:-999px; overflow:hidden}
.vod-wrap .vod-bg{z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; background-position:center; background-repeat:no-repeat; background-size:cover}
.vod-wrap .vod-btn.hide,
.vod-wrap .vod-bg.hide{opacity:0; visibility:hidden}
.vod-wrap .vod{width:100%; height:100%}

/* chart */
.chart{position:relative;}
.chart canvas{-moz-user-select:none; -webkit-user-select:none; -ms-user-select:none}
.chart .chart-tooltip{opacity:1; position:absolute; padding:.5em 1em; background:#fff; box-shadow:0 0 15px 1px rgba(0,0,0,.15); border-radius:5px; transition:all 300ms; pointer-events:none; transform:translate(-50%, -3em);  color:#333; font-weight:700 }
.chart .chart-tooltip-key{display:inline-block; width:10px; height:10px}

/* image & text float box */
.img-float-wrap:after{content:''; display:block; clear:both}
.img-float-box.img{height:100%; background-position:center; background-size:cover; background-repeat:no-repeat}
.img-float-box.txt{display:flex; align-items:center; height:100%}
.img-float-wrap.img--left > .img{float:left}
.img-float-wrap.img--left > .txt{float:right}
.img-float-wrap.img--right > .img{float:right}
.img-float-wrap.img--right > .txt{float:left}
.img-float-wrap.img--left .paragraph{padding-left:4em}
.img-float-wrap.img--right .paragraph{margin-left:auto; padding-right:4em}
@media screen and (max-width:599px){
    .img-float-wrap .img-float-box{width:100%}
    .img-float-wrap.img--left > .img,
    .img-float-wrap.img--left > .txt,
    .img-float-wrap.img--right > .img,
    .img-float-wrap.img--right > .txt{float:none;}
    .img-float-wrap.img--left .paragraph,
    .img-float-wrap.img--right .paragraph{padding:0; margin-top:1em}
}

/* map */
.kabul-map{width:100%; height:100%}

/* icon-subway  &  bus */
.icon-subway{position:relative; width:70px; height:40px; text-align:center}
.icon-subway:before{content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:10px; background:#ccc;}
.icon-subway:after{content:''; position:absolute; left:50%; transform:translateX(-50%); width:40px; height:40px; border-radius:50%}
.icon-subway span{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; font-size:.875rem; font-weight:500; color:#fff}
.icon-subway.subway1:after{background:#0a59c4}
.icon-subway.subway4:after{background:#0098f9}
.icon-subway.subway-etc:after{background:#00ba90}

.icon-bus{display:inline-block; padding:.5em 1em; font-size:.875rem; font-weight:500}
.icon-bus.bus--blue{background:#0a59c4; color:#fff;}
.icon-bus.bus--green{background:#4fae50; color:#fff;}