@charset "utf-8";

.main-body{background: #323435; position: relative; z-index: -3;}
.main{background-color: #fff;position: relative; z-index: -2}
.main .top{width: 100%; background: url(../img/main-bg.jpg) 0 0 no-repeat; background-attachment: scroll; display: flex; justify-content: center; align-items: flex-end; background-size: cover;position: relative;}
.main .top .scr-action{text-align: center;}
.main .top .scr-action p{text-align: center; display: flex; justify-content: center; align-items: flex-start;}
.main .top .scr-action p:first-child{font-weight: 400; color: #fff; margin-bottom: 5px; padding-top: 100px;}
.main .top .scr-action .vertical{display: block; width: 2px; height: 50px; background: #444; position: relative;}
.main .top .scr-action .horizen{display: block; width: 14px; height: 2px; background: #444;    margin-left: -8px; margin-top: 15px;}
.main .top .scr-action .vertical:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 10px; background: #fff; animation: scrAction 2s ease-in-out infinite;}
@keyframes scrAction{
    0%{transform: translateY(0); opacity: 0;}
    10%{transform: translateY(0); opacity: 1;}
    80%{transform: translateY(50px); opacity: 0;}
    100%{transform: translateY(50px);}
}
.main .h2-area{position: absolute; top: 0; left:0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center;}
.main .h2-area h2{color: #fff; font-weight: 300; font-size: 48px; text-align: center;}
.main .h2-area h2 span{font-size: inherit; color: inherit; display: block; font-weight: inherit; line-height: 1.8em;}
.main .h2-area h2 span em{font-size: 0.7em; color: inherit; font-weight: inherit;}

.main .section{position: relative;}
.main .section .sec-wrap{width: 100%; display: flex; justify-content: flex-start; align-items: flex-end;}
.main .section .sec-img{width: 55%; position: relative; z-index: 1;}
.main .section .text-area{margin: 0 60px;}
.main .section .text-area span{font-size: 18px; font-weight: 400; line-height: 2; background-color: #fff;}
.main .section .text-area span.eng{font-size: 15px; font-weight: 300;}
.main .section .text-area h2{font-size: 48px; font-weight: 800; margin: 30px 0;}
.main .section .sec-bg{position: absolute; bottom: -10%; right: 0; width: 700px; height: 560px; background: url(../img/main-illust.svg) 0 0 no-repeat; z-index: -1;}

.main .section.no2 .sec-wrap{justify-content: flex-end;}
.main .section.no2 .sec-bg{left: 0; right: auto; background-position: 0 -560px;}
.main .section.bg3 .sec-bg{right: 0; bottom: -20px; background-position: 0 -1120px;}

/* about main style */
main .sub{font-size: 18px; font-weight: 400;}
main h2{font-size: 48px; font-weight: 800; margin-bottom: 60px; letter-spacing: -1.5px;}
main h2 .sub{font-size: 18px; font-weight: 400; display: block;}

main .top{width: 100%; background: url(../img/message-bg.jpg) 0 0 no-repeat; height: 820px; background-size: cover; background-attachment: fixed;}
main .top .flex{justify-content: space-around; align-items: flex-start;}
main .top .w100 img{width:60%}
main .top .text-area{width: 30%;}
main .top .text-area span{font-size: 22px; display: inline-block; width: 100%; line-height: 1.8em; letter-spacing: -1.5px; word-break: keep-all;}
main .top .text-area .ddaom{width: 52px; height: 47px; display: block; margin: 0 0 50px; background: url(../img/icon-company.svg) 0 0 no-repeat;}

main .content .flex{justify-content: space-between;}
main .content .img-area{display: flex; justify-content: flex-start; flex-direction: column; align-items: flex-end;}
main .content .img-area img{width: 257px; display: block; height: auto;}
main .content .img-area img.sign{width: 172px; margin-top: 20px;}
main .content .st1 .img-area{margin-top: 85px;}
main .content .st2 .img-area{justify-content: flex-start;}
main .content .st1 h2{margin-top: -20px;}
main .content .text-area{font-size: 18px; font-weight: 400; line-height: 2em; margin-right: 120px;} 

main .content .text-area .highlight{display: inline; font-weight: 600; font-size: 18px; line-height: 1.2em; box-shadow: inset 0 -9px 0 #D0E7B3;}
/* 
그라데이션을 넣을 경우....
main .content .text-area .highlight{font-weight: 800; font-size: inherit; position: relative;}
main .content .text-area .highlight:after{content:""; display: inline-block; width: 100%; height: 10px; line-height: 1.2em; display: inline-block; background: linear-gradient(#D0E7B3, #ABCFCB); position: absolute; bottom: -3px; left:0; z-index: -1; opacity: 0.5;} 
*/

main .content .st2 .text-area{margin-left: 80px; margin-right: 0px;}
main .content strong{font-size: 36px; font-weight: 400; display: block; line-height: 1.5em; letter-spacing: -1.5px; margin: 20px 0;}

main > .title{margin-top: 90px; padding-bottom: 60px}
main > .title h2{padding:0; margin-bottom: 0;}
main > .title h2 .sub{padding: 25px 0 0;}
main > .title h2 .eng{font-weight: 700; font-size: inherit; color: inherit;}
main > .title button{border: 1px solid #333; padding: 12px 20px; line-height: 1; font-size: 15px; font-weight: 400;; margin-top: 25px; background: rgba(255,255,255,0.9); cursor: pointer;}
main > .title button i{margin-left: 10px;}


/* about > message */
.message section:first-child h2,.people section:first-child h2,
.vision section:first-child h2{font-size: 24px; text-align: center; font-weight: 700; padding: 60px 0 0;}
.message .content .name span{font-size: 24px;}
.message .content .name>em{font-size: 24px; font-weight: 700; display: inline-block; padding-left: 10px; margin-top: 50px;}
.message .content .name em .sub-text{font-size: 0.7em; font-weight: normal; padding-left: 5px; color: #999;}
.message .content .mabo{margin-bottom: 160px;}
.message .content .section-img{width: 100%;}
.message .content .section-img img{width: 100%}

/* about > vision main style */
.vision .top{background-image: url(../img/vision-bg.jpg);}
.vision .content{position: relative;}
.vision .content:after{content: ""; position: absolute; top: 0; right: 0; background: url(../img/vision-illust.svg) 100% 0 no-repeat; width: 100%; height: 100%; z-index: -1}
.vision .content .st1 .text-area{padding-bottom: 0;}
.vision .content .mabo{margin-bottom: 180px;}

/* about > people */
.people .top{background-image: url(../img/people-bg.jpg);}
.people dl{margin-top: 60px;}
.people dl dt{font-size: 24px; line-height: 2em;}
.people dl dd{font-size: 18px;}
.people dl dd:before{content: "·"; display: inline-block; padding-right: 10px}
.people .content .text-area{margin-right: auto; margin-left: auto;}
.people .content .text-area.keyword{margin: 160px auto; text-align: center;}
.people .keyword dl dd:before{display: none;}
.people .keyword img{width: 100%; max-width: 810px; margin: 0 auto;}
.people .recruit h3{font-size: 24px;}
.people .recruit .inner{margin-bottom: 60px;}
.people .recruit .inner.no1 .flex{justify-content: space-around; margin: 0 auto; align-items: center;}
.people .recruit .inner.no1 .step .bg{display: block; width: 110px; height: 95px; background: url(../img/people-recruit.svg) 0 0 no-repeat; margin-bottom: 15px;}
.people .recruit .inner.no1 .step.no2 .bg{background-position-y: -95px;}
.people .recruit .inner.no1 .step.no3 .bg{background-position-y: -190px;}
.people .recruit .inner.no1 .step em{display: block; text-align: center; line-height: 1.5; }
.people .recruit .inner.no1 .dot{display: block; position: relative; width: 12px; height: 12px; border-radius: 50%; background-color: #eaeaea;}
.people .recruit .inner.no1 .dot:before{content:""; display: block; width: 12px; height: 12px; border-radius: 50%; background-color: #eaeaea; position: absolute; left: -25px; top:0;}
.people .recruit .inner.no1 .dot:after{content:""; display: block; width: 12px; height: 12px; border-radius: 50%; background-color: #eaeaea; position: absolute; right: -25px; top:0;}

.people .recruit .inner.no2 dl{width: 24%; background-color: #fafafa; border: 1px solid #ccc; margin-top: 0; text-align: center; padding: 20px}
.people .recruit .inner.no2 dl dt{font-weight: bold; margin-bottom: 10px;}
.people .recruit .inner.no2 dl dd:before{display:none}

.people .recruit .inner.no3 dl{margin-top: 0;}

/* about > CI & BI */
.cibi:before{content:""; display: block; width: 700px; height: 260px; background: url(../img/sub-illust.svg) 0 0 no-repeat; position: absolute; top: 100px; right: 0; z-index: -2;}

.cibi .logo-area{position: relative; margin-bottom: 90px;}
.cibi .logo-area:nth-child(2){margin-top: -50px;}
/*.cibi .grid-bg{background: url(../img/cibi-bg.png) 0 0 repeat-x; width: 100%; height: 150px; position: absolute; top: 0; left: 0;  opacity: 0.8;}*/
.cibi .logo-area .logo-set{width: 100%; justify-content: space-between; }

.cibi .logo-area .logo-set p{width: 50%; text-align: center;}
.cibi .logo-area .logo-set p .img{display: block; width: 250px; height: 192px; background: url(../img/ci-type.svg) 0 0 no-repeat; margin: 0 auto;}
.cibi .logo-area .logo-set p .img.no2{background-position: 0 -192px;}
.cibi .logo-area .logo-set p .img.no3{background-position: 0 -384px;}
.cibi .logo-area .logo-set p .img.no4{background-position: 0 -576px;}
.cibi .logo-area .logo-set p .img.no5{background-position: 0 -768px;}
.cibi .logo-area .logo-set p .img.no6{background-position: 0 -960px;}
.cibi .logo-area .logo-set p span{display: block; margin: 5px auto 30px;}

.cibi .logo-area.st2{justify-content: space-between;}
.cibi .logo-area.st2 .sub{padding-bottom: 20px; display: inline-block;}
.cibi .logo-area.st2 .logo-set{width: 46%}
.cibi .logo-area.st2 .logo-set .flex{justify-content: space-between;}
.cibi .logo-area.st2 .logo-set .color:nth-child(1){width:38%; }
.cibi .logo-area.st2 .logo-set .color:nth-child(2){width:58%;}
.cibi .logo-area.st2 .logo-set .color{border: 1px solid #063D4E;}
.cibi .logo-area.st2 .logo-set .color dt{height: 180px; background-color: #063D4E; position: relative; top: -1px;}
.cibi .logo-area.st2 .logo-set .color dd{text-align: center;padding: 20px 10px; font-size: 18px;}
.cibi .logo-area.st2 .logo-set:nth-child(2) .color{border-color: #8AAA33;}
.cibi .logo-area.st2 .logo-set:nth-child(2) .color dt{background-color: #8AAA33;}
.cibi .brand-area li{padding: 30px 0; cursor: default;}
/* .cibi .brand-area li .brand{width: 186px; height: 120px; display: block; background: url(../img/logo/duranno-bi.svg) 0 0 no-repeat; margin: 0 auto; transition: 0.2s all; cursor: default;} */
.cibi .brand-area li.qt .brand{width: 186px; height: 120px; display: block; background: url(../img/logo/duranno-bi.svg) 0 0 no-repeat; margin: 0 auto; transition: 0.2s all; cursor: default;background-position: 0 0px;}
.cibi .brand-area li.sl .brand{width: 186px; height: 120px; display: block; background: url(../img/logo/duranno-bi.svg) 0 0 no-repeat; margin: 0 auto; transition: 0.2s all; cursor: default;background-position: 0 -120px;}
.cibi .brand-area li.moksin .brand{width: 186px; height: 120px; display: block; background: url(../img/logo/duranno-bi.svg) 0 0 no-repeat; margin: 0 auto; transition: 0.2s all; cursor: default;background-position: 0 -240px;}
.cibi .brand-area li.sena .brand{width: 186px; height: 120px; display: block; background: url(../img/logo/duranno-bi.svg) 0 0 no-repeat; margin: 0 auto; transition: 0.2s all; cursor: default;background-position: 0 -360px;}
.cibi .brand-area li.yejo .brand{width: 186px; height: 120px; display: block; background: url(../img/logo/duranno-bi.svg) 0 0 no-repeat; margin: 0 auto; transition: 0.2s all; cursor: default;background-position: 0 -480px;}
.cibi .brand-area li.yena .brand{width: 186px; height: 120px; display: block; background: url(../img/logo/duranno-bi.svg) 0 0 no-repeat; margin: 0 auto; transition: 0.2s all; cursor: default;background-position: 0 -600px;}
.cibi .brand-area li.life .brand{width: 186px; height: 120px; display: block; background: url(../img/logo/duranno-bi.svg) 0 0 no-repeat; margin: 0 auto; transition: 0.2s all; cursor: default;background-position: 0 -720px;}
.cibi .brand-area li.vision .brand{width: 186px; height: 120px; display: block; background: url(../img/logo/duranno-bi.svg) 0 0 no-repeat; margin: 0 auto; transition: 0.2s all; cursor: default;background-position: 0 -840px;}
.cibi .brand-area li.kids .brand{width: 186px; height: 120px; display: block; background: url(../img/logo/duranno-bi.svg) 0 0 no-repeat; margin: 0 auto; transition: 0.2s all; cursor: default;background-position: 0 -960px;}
.cibi .brand-area li.academy .brand{width: 186px; height: 120px; display: block; background: url(../img/logo/duranno-bi.svg) 0 0 no-repeat; margin: 0 auto; transition: 0.2s all; cursor: default;background-position: 0 -1080px;}
.cibi .brand-area li.gospel .brand{width: 186px; height: 120px; display: block; background: url(../img/logo/duranno-bi.svg) 0 0 no-repeat; margin: 0 auto; transition: 0.2s all; cursor: default;background-position: 0 -1200px;}
.cibi .brand-area li.bacal .brand{width: 186px; height: 120px; display: block; background: url(../img/logo/duranno-bi.svg) 0 0 no-repeat; margin: 0 auto; transition: 0.2s all; cursor: default;background-position: 0 -1320px;}
.cibi .brand-area li.mall .brand{width: 186px; height: 120px; display: block; background: url(../img/logo/duranno-bi.svg) 0 0 no-repeat; margin: 0 auto; transition: 0.2s all; cursor: default;background-position: 0 -1440px;}
.cibi .brand-area li.duplus .brand{width: 170px; height: 34px; display: block; background: url('https://www.duranno.com/duplus/img/logo_duplus.svg') 0 0 no-repeat;}
.cibi .brand-area li.duplus {display: flex; align-items: center; justify-content: center;}
.cibi .brand-area li:hover .brand{transform: scale(1.15);}


/* history START */
.history section{background-size: cover; background-position: 50% 50%; background-attachment: fixed; transition: 1s all;}
.history section.no1{filter: blur(10px); background-position: 50% 0; background-size: 1920px;}

.year-area{position: fixed; top: 40px; left:0; z-index: 2; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; flex-wrap: wrap; align-content: center;}

.year-area .section-menu{position: fixed; top: 100px; left:4%; z-index: 3;}
.year-area .section-menu li a{width: 45px; text-align: justify; display: block; color: #fff; font-size: 16.5px; font-weight: 700; line-height: 1.8em; font-family: "NanumSquare", "Apple SD Gothic Neo",'Noto Sans KR',sans-serif; text-transform: uppercase;}
.year-area h2{color: #fff; font-size:48px; font-weight: 400; font-weight: 800; display: block; line-height: 1; margin-bottom: 10px;}
.year-area span{color: #fff; font-size: 18px; line-height: 1; font-weight: 700;}
.year-area em{color: #fff; font-size: 13px; font-weight: 400; display: block; margin-top: 10px}

/* year nav on */
.year-area .section-menu li a{transition: 0.5s all;}
.year-area.no1 .section-menu li:nth-child(1) a{color: #AFC869;}
.year-area.no2 .section-menu li:nth-child(2) a{color: #AFC869}
.year-area.no3 .section-menu li:nth-child(3) a{color: #AFC869}
.year-area.no4 .section-menu li:nth-child(4) a{color: #AFC869}
.year-area.no5 .section-menu li:nth-child(5) a{color: #AFC869}
.year-area.no6 .section-menu li:nth-child(6) a{color: #AFC869}

/* year 연도 숫자 부분 - home */
.count-wrap{position: absolute; top: 50%; left: auto; margin-top: -129px; transition: 0.5s all; width: 425px; left: 50%; margin-left: -212.5px;}
.count{}
.count-1{width: 104px; height: 194px; background: url(../img/counting-w.svg) 0 0 no-repeat; display:  inline-block; transition: 0.5s all ease-out; animation: anifoot 2s infinite ease-in-out;}
.count-2{width: 104px; height: 194px; background: url(../img/counting-w-r.svg) 0 0 no-repeat; display: inline-block; transition: 1s all ease-out; transform: translateY(10px);animation: anifoot2 2s infinite ease-in-out 1s; opacity: 0.5}
.count-3{width: 104px; height: 194px; background: url(../img/counting-w.svg) 0 0 no-repeat; display: inline-block; transition: 1.5s all ease-out; animation: anifoot 1.5s infinite ease-in-out;}
.count-4{width: 104px; height: 194px; background: url(../img/counting-w-r.svg) 0 0 no-repeat; display: inline-block; transition: 2s all ease-out; transform: translateY(10px); transform: translateY(10px);animation: anifoot2 1.5s infinite ease-in-out 0.75s; opacity: 0.5}

@keyframes anifoot{
    0%{opacity: 1; transform: translateY(10px);}
    99%{opacity: 0.5;}
    100%{opacity: 1;}
}
@keyframes anifoot2{
    0%{opacity: 0.5;}
    1%{opacity: 1;}
    100%{opacity: 0.5; transform: translateY(0px);}
}

/* year 연도 숫자 부분 각 연도별로 no2(1980)~ no6(2020) */
.no2 .count-1{background-position: 0 -2910px; animation: none; opacity: 1;}
.no2 .count-2{background-position: 0 -2328px; transform: none; animation: none; opacity: 1;}
.no2 .count-3{background-position: 0 -2132px; animation: none; opacity: 1;}
.no2 .count-4{background-position: 0 -2520px; transform: none; animation: none; opacity: 1;}

.no3 .count-1{background-position: 0 -2910px; animation: none; opacity: 1;}
.no3 .count-2{background-position: 0 -2328px; transform: none; animation: none; opacity: 1;}
.no3 .count-3{background-position: 0 -2328px; animation: none; opacity: 1;}
.no3 .count-4{background-position: 0 -2520px; transform: none; animation: none; opacity: 1;}

.no4 .count-1{background-position: 0 -3106px; animation: none; opacity: 1;}
.no4 .count-2{background-position: 0 -2520px; transform: none; animation: none; opacity: 1;}
.no4 .count-3{background-position: 0 -2714px; animation: none; opacity: 1;}
.no4 .count-4{background-position: 0 -2520px; transform: none; animation: none; opacity: 1;}

.no5 .count-1{background-position: 0 -3106px; animation: none; opacity: 1;}
.no5 .count-2{background-position: 0 -2520px; transform: none; animation: none; opacity: 1;}
.no5 .count-3{background-position: 0 -2910px; animation: none; opacity: 1;}
.no5 .count-4{background-position: 0 -2520px; transform: none; animation: none; opacity: 1;}

.no6 .count-1{background-position: 0 -3106px; animation: none; opacity: 1;}
.no6 .count-2{background-position: 0 -2520px; transform: none; animation: none; opacity: 1;}
.no6 .count-3{background-position: 0 -3106px; animation: none; opacity: 1;}
.no6 .count-4{background-position: 0 -2520px; transform: none; animation: none; opacity: 1;}

/* year 개별 섹션 텍스트 수정*/
.year-area .top-text{width: 100%; position: absolute; top: 25%; left:0}
.year-area .bottom-text{width: 100%; position: absolute; bottom: 25%; left:0}
.year-area .y-text-ul{position: relative;}
.year-area .y-text{display: none; color: #fff; opacity: 0; width: 100%; font-size: 24px; font-weight: 700; text-align: center; transition: 0.5s all; position: absolute; top: 0;}
.year-area .y-history{display: none; color: #fff; opacity: 0; }
.year-area .y-history li{font-size: 18px; text-align: left; margin: 15px 0;}
.year-area .y-history li span{display: inline-block; width: 80px; font-size: inherit; font-weight: 700; vertical-align: top; line-height: 1.2;}
.year-area .y-history li em{display: inline-block; font-size: inherit; font-weight: 400; vertical-align: top; max-width: 350px; margin-top: 0; line-height: 1.2;}

.eng .year-area .y-history li em,
.jpn .year-area .y-history li em{font-size: 16px; word-spacing: -1px; word-break: keep-all;}
.eng .year-area .y-text,
.jpn .year-area .y-text{font-size: 22px; word-break: keep-all;}

.year-area.no2 .y-text.no2,
.year-area.no3 .y-text.no3,
.year-area.no4 .y-text.no4,
.year-area.no5 .y-text.no5,
.year-area.no6 .y-text.no6{animation-name: ytShow; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-iteration-count: 1; animation-duration: 1.5s; transition: 0.5s all;}
@keyframes ytShow{
    0%{opacity: 0; }
    50%{opacity: 1;}
    100%{opacity: 1;}
}
.year-area.no2 .count-wrap,
.year-area.no3 .count-wrap,
.year-area.no4 .count-wrap,
.year-area.no5 .count-wrap,
.year-area.no6 .count-wrap{animation: ytLeft 1.5s 1 2s forwards ease-in-out;}
@keyframes ytLeft{
    0%{}
    100%{left: 30%;}
}
.year-area.no2  .y-history,
.year-area.no3  .y-history,
.year-area.no4  .y-history,
.year-area.no5  .y-history,
.year-area.no6  .y-history{animation: yhShow 1.5s 1 2s forwards ease-in-out;}
@keyframes yhShow{
    0%{opacity: 0; margin-right: -0px;}
    50%{opacity: 0;}
    100%{opacity: 1; margin-right: -40%;}
}

/* history-m */
.history-m-body footer{display: none;}
.history-m-body .count{position: fixed; top: 100px; left: auto; transition: 0.5s all; width: 425px; left: 50%; margin-left: -212.5px; z-index: 1; transform: scale(0.55);}
.history-m-body .slick button:hover,
.history-m-body .slick button:active,
.history-m-body .slick button:focus{border: 0; padding:0;}
.history-m-body .slick .slick-prev{left: 10px;} 
.history-m-body .slick .slick-next{right: 10px;} 
.history-m-body .slick-dots{width: 100%; max-width: 500px; top: 10px; left: 0; right:0; display: flex; justify-content: space-evenly; margin: 0 auto;}
.history-m-body .slick-dots li{all: unset; display: block; opacity: 0.5;}
.history-m-body .slick-dots li.slick-active{opacity: 1;}
.history-m-body .slick-dots li.slick-active button:before{opacity: 1; color: #AFC869; -webkit-text-fill-color: #AFC869;}
.history-m-body .slick-dots li button{all: unset; color: transparent; -webkit-text-fill-color: transparent;}
.history-m-body .slick-dots li button:before{all: unset;content: "HOME"; width: auto; color: #fff; font-family: "NanumSquare", "Apple SD Gothic Neo",'Noto Sans KR',sans-serif; display: block; font-weight: 700; -webkit-text-fill-color: #fff;}
.history-m-body .slick-dots li:nth-child(2) button:before{content: "1980";}
.history-m-body .slick-dots li:nth-child(3) button:before{content: "1990";}
.history-m-body .slick-dots li:nth-child(4) button:before{content: "2000";}
.history-m-body .slick-dots li:nth-child(5) button:before{content: "2010";}
.history-m-body .slick-dots li:nth-child(6) button:before{content: "2020";}
.history-m-body .slick-slider{margin-bottom: 0;}
.history-m-body .slick-arrow:before{background: url(../img/history-arrow-m.svg) 0 0 no-repeat; width: 24px; height: 40px;}
.history-m-body .slick-prev:before{background: url(../img/history-arrow-m.svg) 0 0 no-repeat; width: 24px; height: 40px; transform: rotate(180deg)}
.history-m-body .section{position: relative; background-attachment: unset;}
.history-m-body .section.no1{filter: none;}
.history-m-body .section.no1 .blur-bg{display: block; position: absolute; top:0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: inherit; z-index:-1; filter: blur(6px);  -webkit-filter: blur(6px);  -moz-filter: blur(6px); -o-filter: blur(6px);}
.history-m-body .y-text{color: #fff; position: relative; top: 200px; width: 100%; padding: 0 50px; text-align: center; word-break: keep-all; line-height: 1.4em; font-size: 18px;}
.history-m-body .y-text h2{color: inherit; font-size: 32px; line-height: 1em;}
.history-m-body .y-text span{color: inherit; font-size: 15px; display: block; line-height: 1.4em; word-break: keep-all;}
.history-m-body .y-text span.sub{margin-top: 20px; font-size: 14px; opacity: 0.5;}
.history-m-body .y-history{position: absolute; bottom: 50px; width: 100%; padding: 0 50px; display: flex; flex-wrap: wrap; overflow: auto; height: 35%; align-content: flex-start;}
.history-m-body .y-history li{color: #fff; display: table; margin-bottom: 5px; width: 100%;}
.history-m-body .y-history li span{color: inherit; display: table-cell; width: 80px; font-family: "NanumSquare", "Apple SD Gothic Neo",'Noto Sans KR',sans-serif;}
.history-m-body .y-history li em{color: inherit; display: table-cell;}
.eng.history-m-body .y-text{font-size: 16px;}

/* global */
.global:before{content:""; display: block; width: 700px; height: 251px; background: url(../img/sub-illust.svg) 0 -1308px no-repeat; position: absolute; top: 100px; right: 0; z-index: -2;}
.global-slick .slick-dots{bottom: 5px;}
.global-slick .slick-dots li button:before{ background-color: #aaa; opacity: 1; box-shadow :0 0 6px rgba(0,0,0,0.5);}
.global-slick .slick-dots li.slick-active button:before{background-color: #fff; box-shadow: 0 0 6px rgba(0,0,0,0.9);}
.global dl dt{font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 20px;}
.global dl dd{font-size: 18px; font-weight: 400; text-align: center; line-height: 1.8em;}
.global dl dd:nth-child(2){text-align: center; margin-bottom: 40px;}
.global dl dd a{font-size: inherit; font-weight: inherit; color: inherit;}
.global dl dd a:hover{text-decoration: underline;}
.global dl.first{margin: 60px 0;}
.global .more-address{display: flex; justify-content: space-between;}
.global .more-address dl{background: #FAFAFA; border: 1px solid #CCCCCC; padding: 60px 24px; box-sizing: border-box; width: 31.5%;}
.global .more-address dl dd:nth-child(2){text-align: center;}
/* .global .more-address dl dd{text-align: left;} */
.global .more-address dl dd a{margin-left: 10px;}
.global .svg-area{position: relative; z-index: 1; display: flex; justify-content: center;}
.global .svg-area:after{content: ""; width: 100%; height: 100%;background: rgba(255,255,255,0.9); filter: blur(20px); position: absolute; top: 0; left: 0; z-index: 0;}
.global .svg-area svg{width: 80%; position: relative; z-index: 1; height: auto;height: min-intrinsic; margin-bottom: 50px;}


.global .point-dot{animation: dot 1s infinite ease-in-out;}
@keyframes dot{
    0%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}
.global tspan{transition: 0.2s all; font-size: 12px; fill: #aaaaaa;}
.global .bigger-text tspan{font-weight: 700; font-size: 15px; fill: #333;}

.global .map-title{display: flex; justify-content: space-between; margin-bottom: 160px;}
.global .map-title dl{display: flex; flex-wrap: wrap; align-content: flex-start; width:40%;}
.global .map-title dl:nth-child(1),
.global .map-title dl:nth-child(2){width:30%}
.global .map-title dl dt{width: 100%;}
.global .map-title dl dt:before{content: ""; display: block; width: 20px; height: 20px; background: #54A6D9; border-radius: 50%; margin: 0 auto 5px;}
.global .map-title dl:nth-child(2) dt:before{background-color: #A6D954;}
.global .map-title dl:nth-child(3) dt:before{background-color: #EAA56A;}
.global .map-title dl dd{cursor: default; width: 100%; margin: 0 auto; line-height: 1.5em; margin-bottom: 10px;}
.global .map-title dl dd:nth-child(2){ margin-bottom: 10px;}
.global .map-title dl:nth-child(3) dd{width: 50%;}
.global .map-title dl dd:hover{text-decoration: underline;}


/* store */
.store:before{content:""; display: block; width: 700px; height: 251px; background: url(../img/sub-illust.svg) 0 -1040px no-repeat; position: absolute; top: 100px; right: 0; z-index: -2;}

.store .title:nth-child(1){background: url(../img/duranno-mall-logo.svg) 95% 0 no-repeat;}
.store button{cursor: pointer;}
.store .store-info{display: flex; justify-content: flex-start; align-items: flex-start; margin-bottom: 60px;}
.store>div:last-child{margin-bottom: 160px;}
.store .store-info .store-img{min-width: 340px; height: 190px; background: url(../img/store-no-img.png) 50% 50% no-repeat; background-size: cover; border: 1px solid #ccc; }
.store .store-info dl{margin-left: 50px; width: 100%; }
.store .store-info dl dt{border-bottom: 1px solid #ccc;}
.store .store-info dl dt strong{font-size: 24px; display:inline-block; font-weight: 700; display: block;}
.store .store-info dl dt span{font-size: 18px; display:inline-block; font-weight: 400; margin: 20px 0;}
.store .store-info dl dt button{float: right; background: rgba(255,255,255,0.6);}
.store .store-info dl dt button i{margin-left: 5px;}
.store .store-info dl dd{display: flex; align-items: top; padding-top: 20px;}
.store .store-info dl dd span{display: inline-block; width: 100px; font-size: 18px; font-weight: 400; line-height: 1.8em;}
.store .store-info dl dd em{display: inline-block; font-size: 18px; font-weight: 400; line-height: 1.8em;}
.store .store-map{display: none; width: 100%; height: 540px; margin-bottom: 60px;}


/* ministry > books */
main.books:before{content:""; display: block; width: 700px; height: 251px; background: url(../img/sub-illust.svg) 0 -270px no-repeat; position: absolute; top: 100px; right: 0; z-index: -2;}

.third-area ul{display: flex; justify-content: flex-start; flex-wrap: wrap;}
.third-area li{width: 30%; margin-bottom: 5%; margin-right: 5%; cursor: pointer}
.third-area li:nth-child(3n){margin-right: 0;}
.third-area li .bg{height: 191.25px; display: block; border: 1px solid #ccc; display: flex; justify-content: center; align-items: flex-end;}
.third-area li img{display: block;}
.third-area li .title{font-size: 24px; display: block; text-align: center; font-weight: 700; padding: 20px 0 15px}
.third-area li .sub{font-size: 18px; display: block; text-align: center; font-weight: 400;}
.third-area li .detail{display: none;}
.third-area.st1 li .bg{width: 100%; justify-content: center; align-items: center; background-color: #fff; border: 1px solid #ccc;}
.third-area.st1 li .bg img{width: auto;}
.jpn .third-area li .title{font-size: 18px;}

.third-area.st2 .bg{border: 0;}
.third-area.st2 .bg img{box-shadow: 0px 3px 6px rgba(0,0,0,0.16); width: 130px;}

.third-area .btn-area,
.third-area.st1 .title,
.third-area.st1 .sub,
.third-area.st2 .title,
.third-area.st2 .sub,
.third-area.st3 .sub,
.third-area.st4 .sub{display: none;}

.jpn .third-area.st2 .title{display: block; font-size: 18px;}

.third-area.st3 li .bg{width: 100%; justify-content: center; align-items: center; background-color: #fff; border: 1px solid #ccc; overflow: hidden; background-color: #f0f0f0;}
.third-area.st3 li .bg img{height: 100%; width: auto;}

/* ministry > edu */
main.edu:before{content:""; display: block; width: 700px; height: 251px; background: url(../img/sub-illust.svg) 0 -524px no-repeat; position: absolute; top: 100px; right: 0; z-index: -2;}

.edu .third-area.st2 .bg img{width: 150px;}

.third-area.st4 li .bg{width: 100%; justify-content: center; align-items: center; background-color: #fff; border: 1px solid #ccc; overflow: hidden; background-color: #f0f0f0;}
.third-area.st4 li .bg img{height: 100%; width: auto;}
.third-area.st4 li .bg{justify-content: flex-start;}
.third-area.st4 li .bg.end{justify-content: flex-end;}
.third-area.st4 li .bg.center{justify-content: center;}


/* ministry > help */
main.help:before{content:""; display: block; width: 700px; height: 251px; background: url(../img/sub-illust.svg) 0 -787px no-repeat; position: absolute; top: 100px; right: 0; z-index: -2;}
.third-area.st6 li .bg{background-size: 150px; background-repeat: no-repeat; background-position: 50% 50%; background-color: #fff;}


.viewer-bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none;}
.viewer-bg div.viewer-close{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 101;}
.viewer-bg .view-flex{width: 100%; height: 100%; display: flex; background: rgba(0,0,0,0.25); justify-content: center; align-items: center;}

.viewer{width: 100%; max-width: 540px; text-align: left; background: #fff; position: relative; z-index: 102; height: 65%;}
.viewer .scr-area{ height: 100%; overflow-y: auto; -ms-overflow-style: none;  padding: 50px 50px 0; border-bottom: 50px solid #fff;}
.viewer .scr-area::-webkit-scrollbar {display: none !important;}
.viewer .bg-area{width: 100%; min-height: 200px; background-color: #fafafa; text-align: center; display: flex; justify-content: center; align-items: center; height: auto; padding: 30px 0;}
.viewer .bg{display: block;}
.viewer .bg img{height: 200px; width: auto; box-shadow: 0px 3px 6px rgba(0,0,0,0.16);}
.viewer.st1 .bg-area{height: 200px;}
.viewer.st1 .bg img{height: auto; box-shadow: none;}
.viewer.st3 .bg-area{padding: 0; overflow: hidden; height: 200px;}
.viewer.st3 .bg{width:100%;}
.viewer.st3 .bg img{height: auto; box-shadow: none; width: 100%;}
.viewer.st4 .bg-area{justify-content: flex-start; padding: 0; overflow: hidden;}

.viewer .btn-area{display: flex; justify-content: space-between;}
.viewer .btn-area a{display: block; width: 48%; height: 40px; line-height: 40px; padding: 0 15px;cursor: pointer; box-sizing: border-box; background-color: transparent; border: 1px solid #333; color: #333; font-size: 15px; transition: 0.2s all; text-align: center; margin: 0 0 20px}
.viewer .btn-area a i{margin-left: 10px;}
.viewer .title{font-size: 24px; display: block; text-align: left; font-weight: 700; padding: 20px 0 10px;}
.viewer .sub,.viewer .detail{font-size: 18px; display: block; text-align: left; margin-bottom: 20px; font-weight: 400;}
.viewer .detail{display: block; line-height: 1.8em;}
.viewer button.viewer-close{position: absolute; right: 0; top: 0; border: 0; width: 40px; height: 40px; background: url(../img/icon-company.svg) 0 -287px no-repeat; margin: 5px; display: block; padding: 0; z-index: 100;}

.mobile-show{display: none;}
.mobile-hidden{display: block;}

@media screen and (max-width: 1024px){

    main{width: 100%; overflow: hidden;}
    main h2{font-size: 32px; margin-bottom: 20px;}
    .main .top{background-attachment: scroll;}
    .main .section.win-h{height: auto!important;}
    .main .h2-area h2{font-size: 32px; padding: 0 70px; width: 100%;}
    .main .section .sec-wrap{flex-wrap: wrap;}
    .main .section.no2 .sec-wrap{flex-wrap: wrap; flex-direction: column-reverse;}
    .main .section .sec-img{width: 100%; max-width: 500px; display: block; margin: 0 auto; align-self: flex-start;}
    .main .section .text-area{text-align: center; margin: 50px auto 180px; width: 100%; padding: 0 20px;}
    .main .section .sec-bg{background-size: 100%; width: 500px; height: 400px; bottom: 5%;}
    .main .section.no2 .sec-bg{background-position: 0 -397px;}
    .main .section.no1.bg3 .sec-bg{background-position: 0 -808px; bottom: 0;}
    .main .section .text-area span.eng{font-size: 15px;}
    .main .section .text-area h2{font-size: 32px;}
    .main .section .text-area span{font-size: 16px;}
    .main .section.last-div{margin-bottom: 100px; padding-bottom: 0!important;}

    main .top{background-attachment: scroll;}
    main .top .w100{padding-right: 0; padding-left: 0; display: block}
    main .top .w100 img{width: 100%; max-width: 500px; display: block; margin: 0 auto;}
    main .top .text-area{width: 100%; max-width: 500px; margin: 0 auto; text-align: center; padding: 0 50px 60px;}
    main .top .text-area .ddaom{margin: 20px auto;}
    main .top .text-area span{font-size: 18px;}
    .message .win-h,
    .people .win-h,
    .vision .win-h{height: auto!important;}

    .message section:first-child h2, 
    .people section:first-child h2, 
    .vision section:first-child h2{padding: 40px 0 0}

    main .content .st1{flex-wrap: wrap; flex-direction: column-reverse;}
    main .content .st1 h2,
    main .content .st2 h2{margin-top: 20px; font-size: 32px; text-align: center; width: 100%; margin-bottom: 40px;}
    main .content .st2 .flex{flex-wrap: wrap;}
    main .content .st2 .text-area{margin: 0 auto;}
    main .content .img-area{width: 100%; align-items: center;}
    main .content .st1 .img-area{ margin-top: 40px;}
    main .content .img-area .sign{display: none;}
    main .content .img-area img{width: 186px;}
    main .content .text-area{width: 100%; max-width: 500px; margin-right: auto; margin-left: auto; align-items: center; font-size: 16px; text-align: center;}
    main .content .text-area .name{text-align: center;}
    main .content strong{font-size: 32px; word-break: keep-all;}
    .message .content .name span,
    .message .content .name em{font-size: 18px;}
    .message button{display: block; margin: 15px auto 0;}
    .message .content .mabo{margin-bottom: 40px;}
    .message .content .mabo:last-child{margin-bottom: 100px;}

    main.vision .content .st1 h2,
    main.vision .content .st2 h2{margin-top: 40px;}
    .vision .content .mabo{margin-bottom: 80px;}
    .vision .content:after{background-size: 375px; top: 48%;}

    .people button{margin-left: auto; margin-right: auto;}
    main.people .content .st1 h2{margin-bottom: 20px; margin-top: 40px;}
    .people dl{margin-top: 40px;}
    .people dl dt{font-size: 18px; word-break: keep-all; line-height: 1.8em; margin-bottom: 10px;}
    .people dl dd{font-size: 15px; word-break: keep-all; line-height: 1.8em; margin-bottom: 10px;}
    .people .content .text-area.keyword{margin: 80px auto;}
    .people .recruit h3{font-size: 18px;}
    .people .recruit .flex{display: block;}
    .people .recruit .inner.no1 .step .bg{margin-left: auto; margin-right: auto;}
    .people .recruit .inner.no1 .dot{margin: 50px auto}
    .people .recruit .inner.no1 .dot:before{left: 0; top: -25px;}
    .people .recruit .inner.no1 .dot:after{right: 0; bottom: -25px; top: auto;}

    .people .recruit .inner.no2 dl{width: 100%; margin-bottom: 20px;}


    .people .recruit .inner.no3{position: relative;}
    .people .recruit .inner.no3 button{position: absolute; bottom: 40px; right: 0; left: 0; width: 241px; display: inline-block; }

    main .sub,
    main h2 .sub{font-size: 15px;}
    main > .title{text-align: center; margin-top: 40px; padding-bottom: 40px;}
    main > .title h2{text-align: center; font-size: 32px;}
    main > .title h2 .sub{padding: 20px 0 0;}
    main > .title button{margin-right: auto; margin-left: auto;}


    main.books:before{width: 375px; height: 140px; background-size: 100%; background-position-y: -140px; top: 75px}
    main.edu:before{width: 375px; height: 140px; background-size: 100%; background-position-y: -280px; top: 67px;}
    main.help:before{width: 375px; height: 140px; background-size: 100%; background-position-y: -420px; top: 67px;}
    .store:before{width: 375px; height: 140px; background-size: 100%; background-position-y: -560px;}
    .global:before{width: 375px; height: 140px; background-size: 100%;  background-position-y: -700px;}
    .cibi:before{width: 375px; height: 140px; background-size: 100%;}
    .cibi .logo-area{margin-bottom: 40px; display: block;}
    .cibi .logo-area .logo-set{max-width: 500px; margin: 0 auto;}
    .cibi .logo-area .logo-set p img{width: 100px;}
    .cibi .logo-area.st2{margin-bottom: 80px;}
    .cibi .logo-area.st2 .logo-set{width: 100%; max-width: 375px; margin-right: auto; margin-left: auto; margin-bottom: 40px;}
    .cibi .logo-area.st2 .logo-set .color:nth-child(1){display: none;}
    .cibi .logo-area.st2 .logo-set .color:nth-child(2){width: 100%; position: relative;}
    .cibi .logo-area.st2 .logo-set .color:nth-child(2):after{content: "PANTONE 3165c"; color: #fff; position: absolute; bottom: 80px; left: 20px;}
    .cibi .logo-area.st2 .logo-set:last-child .color:nth-child(2):after{content: "PANTONE 390c";}
    .cibi .logo-area.st2 .logo-set .color dd{font-size: 15px; text-align: left; padding: 20px;}

    .cibi .logo-area:nth-child(2){margin-top: -20px;}
    .cibi .logo-area .logo-set p .img{width: 140px; height: 107px; background-size: 100%;}
    .cibi .logo-area .logo-set p .img.no2{background-position: 0 -107px;}
    .cibi .logo-area .logo-set p .img.no3{background-position: 0 -214px;}
    .cibi .logo-area .logo-set p .img.no4{background-position: 0 -321px;}
    .cibi .logo-area .logo-set p .img.no5{background-position: 0 -428px;}
    .cibi .logo-area .logo-set p .img.no6{background-position: 0 -535px;}

    .cibi .grid-bg{background-size: 700px;}
    .cibi .brand-area li{padding: 0;}
    .cibi .brand-area li .brand{width: 150px; height: 110px; background-position-x: 50%!important;}
    .cibi .brand-area li.academy .brand{background-size: 140px; background-position-y: -796px;}
    .cibi .brand-area li.bacal .brand{background-size: 130px; background-position-y: -905px;}
    .cibi .brand-area li.duplus .brand {width: 130px; height: 26px;}

    .third-area ul{justify-content: space-between; max-width: 500px; margin: 0 auto;}
    .third-area li{width: 47.5%; margin-right: 0;}
    .third-area li .title{font-size: 18px;}
    .third-area.st1 li .bg{height: auto;}
    .third-area.st1 li .bg img{width: 80%; max-width: 186px;}
    .third-area.st2 .bg{align-items: center;}
    .third-area.st2 li{margin-bottom: 10%;}
    .third-area.st2 li:nth-child(2){margin-top: 100px;}
    .third-area.st2 li:nth-child(odd){margin-top: -100px;}
    .third-area.st2 li:nth-child(1){margin-top: 0;}
    
    .third-area.st3 li{width: 100%; margin-bottom: 50px;}
    .third-area.st3 li:last-child{margin-bottom: 0;;}
    .third-area.st3 li .title{padding: 20px 0 10px;}
    .third-area.st3 li .bg{height: 0; padding-bottom: 54%; justify-content: flex-start; align-items: flex-start;}
    .third-area.st3 li .bg img{height: auto; width: 100%;}
    .third-area.st3 li .sub{font-size: 15px; display: block;}

    .edu .third-area.st2 .bg{height: auto;}
    .edu .third-area.st3 li{width: 47.5%; margin-bottom: 40px;}
    .edu .third-area.st3 li .sub{display: none;}
    .edu .third-area.st3 li .title{padding-bottom: 0; padding-top: 10px;}
    .edu .third-area.st2 li{margin-bottom: 40px;}
    .edu .third-area.st2 li:nth-child(2){margin-top: 0;}
    .edu .third-area.st2 li:nth-child(odd){margin-top: 0;}
    .edu .third-area.st2 li:nth-child(1){margin-top: 0;}

    .third-area li:last-child,
    .third-area li:nth-last-of-type(2){margin-bottom: 0;;}
    .third-area.st3 li:nth-last-of-type(2){margin-bottom: 50px;}
    .third-area.st6 li .bg{background-size: 100px; height: 90px}

    .viewer{height: 80%;}
    .viewer-bg .view-flex{padding: 0 20px;}
    .viewer .scr-area{padding: 50px 20px 0; border-bottom: 20px solid #fff;}
    .viewer .btn-area{flex-wrap: wrap;}
    .viewer .btn-area a{width: 100%; margin: 0 0 10px}
    .viewer .bg-area{padding: 20px 0;}
    .viewer .bg img,
    .viewer.st1 .bg-area{height: 150px;}
    .viewer.st3 .bg-area{height: 150px; min-height: 150px;}
    .viewer .title{font-size: 18px;}
    .viewer .sub, .viewer .detail{font-size: 15px;}

    .store .title:nth-child(1){background-position: 50% 87px; background-size: 150px;}
    main.store .title:nth-child(1) button{margin-top: 140px;}
    .store .store-info{display: block; max-width: 500px; width: 100%; margin: 0 auto 50px;}
    .store .w100:last-child .store-info{margin-bottom: 0;;}
    .store .store-info dl{margin-left: 0;}
    .store .store-info dl dt{display: block; position: relative;}
    .store .store-info dl dt strong{font-size: 18px; margin: 30px 0;}
    .store .store-info dl dt span{font-size: 15px; margin: 0 0 20px; }
    .store .store-info dl dt button{font-size: 15px; position: absolute; top: -10px; right: 0;}
    .store .store-info dl dd{padding-top: 10px;}
    .store .store-info dl dd span{width: 63px; white-space: nowrap; margin-right: 10px; font-size: 15px;}
    .store .store-info dl dd em{width: auto; font-size: 15px; line-height: 1.6em;}
    .store .store-info .store-img{width: 100%; margin: 0 auto; min-width: unset;}
    .store .store-map{width: 100%; max-width: 500px; height: 188px; position: absolute!important; top: 1px; left: 1px; border-right: 20px solid #fff; border-left: 20px solid #fff; margin: 0 auto; right: 1px;}
    .store .w100{position: relative;}
    .store>div:last-child{margin-bottom: 120px;}

    .global dl.first{margin: 20px 0 40px;}
    .global dl dt{font-size: 18px;}
    .global dl dd{font-size: 15px;}
    .global dl dd:nth-child(2){margin-bottom: 20px;}
    .global .svg-area svg{width: 100%;}
    .global .more-address{flex-wrap: wrap;}
    .global .more-address dl{width: 100%; max-width: 500px; padding: 40px; margin: 0 auto 40px;}
    .global .map-title{flex-wrap: wrap; justify-content: flex-start; margin-bottom: 120px;}
    .global .map-title dl:nth-child(1), 
    .global .map-title dl:nth-child(2){width: 200px; margin: 0 auto 50px;}
    .global .map-title dl:nth-child(3){width: 400px; margin: 0 auto;}
    .global .map-title dl:nth-child(3) dd{width: 200px;}

    main.history{overflow: unset;}
    .history section{background-attachment: unset;}
    .year-area span{font-size: 15px;}
    .year-area .section-menu{left: 25px; top: 77px;}
    .year-area .top-text{top: unset; bottom: 15%; padding: 0 10%; font-size: 15px; word-break: keep-all; line-height: 1.6em;}
    .year-area .bottom-text{top: 50%; bottom: unset; width: 100%; margin: -64px auto 0; padding: 0 10%; line-height: 1.8em; word-break: keep-all;}
    .year-area .bottom-text h2{font-size: 32px;}
    .year-area .bottom-text span{font-size: 18px;}
    .year-area .count-wrap{margin-top: -250px;}
    .year-area .count{transform: scale(0.45); width: 100%; white-space: nowrap;}
    .year-area .y-text-ul{top: -30px;}
    .year-area .y-text{padding: 0 50px; word-break: keep-all; font-size: 18px;}
    .year-area .y-history li{font-size: 15px; display: table; padding: 0 20px}
    .year-area .y-history li span{display: table-cell;}
    .year-area .y-history li em{display: table-cell;}
    .year-area .section-menu li a{font-weight: 400; line-height: 1.6em;}
    
    .year-area.no2 .count-wrap,
    .year-area.no3 .count-wrap,
    .year-area.no4 .count-wrap,
    .year-area.no5 .count-wrap,
    .year-area.no6 .count-wrap{animation: ytLeftM 1.5s 1 2s forwards ease-in-out;}
    @keyframes ytLeftM{
        0%{}
        100%{margin-top: 0; top:50px; }
    }
    .year-area.no2  .y-history,
    .year-area.no3  .y-history,
    .year-area.no4  .y-history,
    .year-area.no5  .y-history,
    .year-area.no6  .y-history{animation: yhShowM 1.5s 1 2s forwards ease-in-out; height: 200px; overflow-y: scroll; margin-top: 150px; padding: 0 20px}
    @keyframes yhShowM{
        0%{opacity: 0; margin-right: 0;}
        50%{opacity: 0;}
        100%{opacity: 1; margin-right: 0;}
    }
    

    .mobile-show{display: block;}
    .mobile-hidden{display: none;}
}

@media screen and (max-width: 375px){
    .main .top{background-size: 1200px; background-position-x: -78px;}
}


@media screen and (min-height: 569px){ /* 아이폰 6/7/8이상 */
    .history-m-body .y-text{padding: 0 20%;}
    .history-m-body .y-history{height: 40%; padding: 0 20%}

}


@media screen and (max-width: 320px){
	.main .h2-area h2{font-size: 24px; margin-top: -50px;}
}