@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

/*  기념사 */
.content-box{padding:60px;border-radius:var(--bd24);box-shadow:3px 3px 32px rgba(0,0,0,.32);background-color: #fff;overflow:hidden;}
.greeting{position:relative;}
.greeting:after{content:'';width:601px;height:501px;background:url('/images/sub/greeting-deco.png')no-repeat 100% 0/contain;position: absolute;right:-60px;top:-55px;}
.greeting .tit{margin-bottom:25px;font-size:var(--fz28);font-weight:500;color:var(--dark);line-height:1.4em;}
.dt{font-size:var(--fz18);line-height:1.56em;}
.greeting .wrap p{margin-bottom:30px;}
.greeting .wrap p:last-child{margin-bottom:0;}
.greeting .ceo{margin-top:35px;display:flex;align-items:center;}
.greeting .ceo p{font-weight:700;margin-right:20px;}
.greeting .ceo .sign2{margin-left:10px;}

.sns-share{margin-top:55px;}
.sns-share .tit{margin-bottom:15px;text-align:center;font-size:var(--fz24);color:var(--dark);line-height:1.3em;}
.sns-share ul{display:flex;justify-content:center;margin:0 -5px;}
.sns-share ul li{padding:0 5px;}
.sns-share ul li .btn{display:block;width:50px;height:50px;background-repeat:no-repeat;background-size:contain;background-position:50% 50%;border-radius:50%;transition:.3s;font-size:0;}
.sns-share ul li .btn.facebook{background-image:url('/images/common/sns-facebook.png');}
.sns-share ul li .btn.twitter{background-image:url('/images/common/sns-twitter.png');}
.sns-share ul li .btn.youtube{background-image:url('/images/common/sns-youtube.png');}
.sns-share ul li .btn.insta{background-image:url('/images/common/sns-insta.png');}
.sns-share ul li .btn.kakao{background-image:url('/images/common/sns-kakao.png');}
.sns-share ul li .btn.blog{background-image:url('/images/common/sns-blog.png');}
.sns-share ul li .btn.facebook:hover{background-image:url('/images/common/sns-facebook-on.png');}
.sns-share ul li .btn.twitter:hover{background-image:url('/images/common/sns-twitter-on.png');}
.sns-share ul li .btn.youtube:hover{background-image:url('/images/common/sns-youtube-on.png');}
.sns-share ul li .btn.insta:hover{background-image:url('/images/common/sns-insta-on.png');}
.sns-share ul li .btn.kakao:hover{background-image:url('/images/common/sns-kakao-on.png');}
.sns-share ul li .btn.blog:hover{background-image:url('/images/common/sns-blog-on.png');}

/* 50주년 엠블럼 */
.emblem .top-con{margin-bottom:100px;}
.emblem .top-con .logo{margin-bottom: 55px;padding:110px 40px;border:1px solid #ddd;text-align:center;}
.emblem .top-con .tt-wrap{text-align:center;}
.emblem .top-con .tt-wrap .tit{margin-bottom:20px;font-size:var(--fz22);color:var(--dark);font-weight:600;line-height:1.4em;}

.emblem .btm-con .flex{display:flex;margin:0 -15px;}
.emblem .btm-con .flex .col{width:50%;padding:0 15px;}
.emblem .btm-con .flex .col .logo{margin-bottom:40px;padding:50px;border:1px solid #ddd;text-align:center;background:url('/images/sub/emblem-bg.jpg')no-repeat 50% 50%/cover;}
.emblem .btm-con .flex .col .btn-down{display:flex;align-items:center;position:relative;width:200px;height:50px;padding:0 20px;margin:0 auto;background-color:var(--snd);color: #fff;line-height:1.2em;}
.emblem .btm-con .flex .col .btn-down:after{content:'';width:24px;height:24px;background:url('/images/sub/ic-down.png')no-repeat 100% 50%/contain;position: absolute;right:20px;top:50%;margin-top:-12px;}

/* 협회 50년사 */
.pg-menu{margin-bottom:60px;}
.pg-menu ul{display:flex;}
.pg-menu ul li{flex:1;margin-right:-1px;}
.pg-menu ul li a{display:flex;justify-content:center;align-items:center;height:60px;border:1px solid #ddd;color: #8e8e8e;font-weight:600;font-size:var(--fz20);line-height:1.2em;text-align:center;}
.pg-menu ul li.active a{background-color:var(--pri);color: #fff;border-color:var(--pri);}

.pdf-wrap{max-width:800px;width:100%;margin:0 auto;}

/* 특별좌담회 */
.discussion .title-wrap{margin-bottom:55px;text-align:center;color:var(--dark);}
.discussion .title-wrap .sub{margin-bottom:15px;font-size:var(--fz24);font-weight:500;line-height:1.4em;}
.discussion .title-wrap .tit{font-size:var(--fz35);font-weight:700;line-height:1.3em;}
.discussion .row{margin-bottom:55px;}
.discussion .row:last-child{margin-bottom:0;}
.discussion .row p{margin-bottom:30px;font-size:var(--fz18);line-height:1.56em;}
.discussion .row p:last-child{margin-bottom:0;}
.discussion .row p span{display:block;}

/*  엔지니어링 역사관 */
.engine-history .top-txt{padding:30px;margin-bottom:60px;border-radius:8px;text-align:center;border:1px solid #f97215;}
.engine-history .top-txt .dt{margin-bottom:25px;}
.engine-history .top-txt .dt:last-child{margin-bottom:0;}
.engine-history .top-txt .dt strong{color:var(--dark);font-weight:600;}

.engine-history .row{margin-bottom:60px;}
.engine-history .row:last-child{margin-bottom:0;}
.engine-history .row .tt-wrap{margin-bottom:25px;}
.engine-history .row .tt-wrap .tit{position:relative;padding-left:30px;color:var(--dark);font-weight:600;font-size:var(--fz24);line-height:1.4em;}
.engine-history .row .tt-wrap .tit:before{content:'';width:20px;height:20px;background:url('/images/sub/tit-bullet.png')no-repeat 0 50%/contain;position: absolute;left:0;top:.3em;}
.engine-history .row .tt-wrap .dt{padding-left:30px;margin-top:10px;}
.engine-history .row .imgs .flex{display:flex;margin:0 -15px;}
.engine-history .row .imgs .flex .img{width:50%;padding:0 15px;}

.engine-history .row .tt-wrap .squ-txt{display:flex;padding-left:30px;margin-top:10px;font-size:var(--fz18);}
.engine-history .row .tt-wrap .squ-txt p{position:relative;padding-left:25px;}
.engine-history .row .tt-wrap .squ-txt p:before{content:'';width:16px;height:16px;border:3px solid var(--snd);position: absolute;left:0;top:.35em;}
.engine-history .row .tt-wrap .squ-txt p span{margin-left:20px;}
.engine-history .row .tt-wrap .squ-txt a{display:inline-block;margin-left:20px;transition:.3s;color:var(--snd);font-size:var(--fz20);font-weight:600;}
.engine-history .row .tt-wrap .squ-txt a:hover{text-decoration:underline;color:var(--snd);}


.engine-history.concert .concert-tit{margin-bottom:45px;font-size:var(--fz35);font-weight:600;color:var(--pri);text-align:center;line-height:1.2em;}
.engine-history.concert .tags{margin-bottom:45px;}
.engine-history.concert .tags ul{display:flex;margin:0 -18px;}
.engine-history.concert .tags ul li{width:25%;padding:0 18px;}
.engine-history.concert .tags ul li .tag{display:flex;justify-content:center;align-items:center;height:54px;border-radius:var(--bd8);border:1px solid var(--pri);padding:0 10px;font-size:var(--fz18);line-height:1.4em;font-weight:500;}
.engine-history.concert .row .imgs .flex{margin-bottom:32px;}
.engine-history.concert .row .imgs .flex:last-child{margin-bottom:0;}

/* 카드뉴스 */
.card-news .con{margin-bottom:60px;}
.card-news .con:last-child{margin-bottom:0;}
.card-news .con .tit{padding:15px 20px;font-size:var(--fz22);font-weight:600;color: #fff;background-color:var(--snd);text-align:center;line-height:1.4em;}
.card-news .con .cnt{padding:20px;border:1px solid #ddd;border-top:none;}
.card-news .con .cnt .flex{display:flex;margin:0 -69px;}
.card-news .con .cnt .flex .col{position:relative;width:50%;padding:0 69px;}
.card-news .con .cnt .flex .col:after{content:'';width:100px;height:100px;background:url('/images/sub/card-arr.jpg')no-repeat 50% 50%/contain;position: absolute;right:-50px;top:50%;margin-top:-50px;}
.card-news .con .cnt .flex .col:last-child:after{display:none;}
.card-news .con .cnt .flex .col .pic{position:relative; padding-bottom:100%; overflow:hidden;}
.card-news .con .cnt .flex .col .pic img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}

/* 공통 히스토리 */
html{scroll-behavior:smooth;}
.doc-history .top-con .bg-box{padding:35px 40px;background-repeat:no-repeat;background-size:cover;background-position:50% 50%;color: #fff;}
.doc-history .top-con .bg-box .year{margin-bottom:20px;line-height:1.2em;font-size: clamp(1.375rem, 0.75rem + 2.5vw, 3.75rem);font-weight:700;}
.doc-history .top-con .bg-box .tit{font-size:var(--fz28);font-weight:600;line-height:1.4em;}
.doc-history .top-con .bg-box .tt{margin-top:10px;}
.doc-history .top-con .tab{margin-top:40px;}
.doc-history .con .cnt{padding-top:60px;}
.doc-history .con .cnt:first-child{padding-top:80px;}
.doc-history .con .cnt .tt-wrap{display:flex;border-bottom:1px solid var(--snd);}
.doc-history .con .cnt .tt-wrap .year{display:flex;justify-content:center;align-items:center;width:160px;min-height:50px;border-radius:var(--bd24) 0 0 0 ;color: #fff;font-size:var(--fz24);font-weight:600;line-height:1.2em;background-color:var(--snd);padding-top:2px;text-align:center;}
.doc-history .con .cnt .tt-wrap .txt{min-width:0;width:1%;flex:1 1 auto;padding:10px 10px 10px 20px;color:var(--dark);line-height:1.5em;font-weight:500;font-size:var(--fz20);}
.doc-history .con .cnt .img{padding-left:180px;margin-top:20px;}

.doc-history.type2 .top-con .bg-box{display:flex;align-items:flex-end;min-height:450px;}
.doc-history.type2 .top-con .bg-box .inner{width:100%;}

.doc-history.type2 .con .cnt .tt-wrap .year{width: 200px;}
.doc-history.type2 .con .cnt .img{padding-left:220px;}

/* 역대협회장 */
.president-list ul{display:flex;flex-wrap:wrap;margin:0 -40px -80px;}
.president-list ul li{width:33.3333%;padding:0 40px;margin-bottom:80px;}
.president-list ul li a{display:block;}
.president-list ul li a .pic {position:relative; height:0; padding-bottom:114.138%; overflow:hidden;}
.president-list ul li a .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.president-list ul li a .name-wrap{border:1px solid #ddd;border-top:none;padding:15px;transition:.3s;text-align:center;}
.president-list ul li a .name-wrap .num{margin-bottom:3px;color: #686868;line-height:1.4em;transition:.3s;}
.president-list ul li a .name-wrap .name{color:var(--dark);font-weight:600;font-size:var(--fz24);line-height:1.3em;transition:.3s;}
.president-list ul li a:hover .name-wrap{background-color: var(--pri);border-color:var(--pri);}
.president-list ul li a:hover .name-wrap .num{color: #fff;}
.president-list ul li a:hover .name-wrap .name{color: #fff;}

.pop-wrapper{position:relative;padding-top:40px;}
.pop-wrapper .modal-close{display:block;width:22px;height:22px;background:url('/images/sub/pop-close.png')no-repeat 50% 50%/contain;position: absolute;right:20px;top:0;font-size:0;}
.pop-president{position:relative;padding:60px;border-radius:var(--bd24);background-color: #fff;box-shadow:3px 3px 32px rgba(0,0,0,.32);}
.pop-president:before{content:'';width:348px;height:266px;background:url('/images/sub/pop-deco.jpg')no-repeat 100% 50%/contain;position: absolute;right:60px;bottom:60px;}
.pop-president .flex{display:flex;}
.pop-president .flex .img{width:306px;margin-right:80px;}
.pop-president .flex .info{min-width:0;width:1%;flex:1 1 auto;}
.pop-president .flex .info .name-wrap{display:flex;align-items:flex-end;padding-bottom:20px;margin-bottom:25px;border-bottom:1px solid #ddd;}
.pop-president .flex .info .name-wrap .name{color:var(--dark);font-size:var(--fz40);font-weight:600;line-height:1.3em;}
.pop-president .flex .info .name-wrap .num{margin-left:20px;padding-bottom:5px;font-size:var(--fz18);line-height:1.3em;}
.pop-president .flex .info .row{margin-bottom:30px;}
.pop-president .flex .info .row:last-child{margin-bottom:0;}
.pop-president .flex .info .row .row-tit{position:relative;padding-left:24px;font-size:var(--fz20);font-weight:600;color:var(--dark);line-height:1.4em;}
.pop-president .flex .info .row .row-tit:before{content:'';position: absolute;left:0;top:.3em;width:14px;height:14px;background:url('/images/sub/pop-bullet.png')no-repeat 0 50%/contain;}
.pop-president .flex .info .row .txt{padding-left:24px;margin-top:10px;}

.dot-list li{position:relative;margin-bottom:3px;padding-left:13px;}
.dot-list li:before{content:'';width:3px;height:3px;border-radius:50%;background-color:var(--pri);position: absolute;left:0;top:.7em;}
.dot-list li:last-child{margin-bottom:0;}
.dot-list li.none{padding-left:0;}
.dot-list li.none:before{display:none;}

.card-sld{position:relative;}
.card-sld .slick-arrow{display:block;width:15px;height:27px;background-repeat:no-repeat;background-size:contain;background-color:transparent;border:none;font-size:0;position: absolute;top:50%;transform:translateY(-50%);z-index:1;}
.card-sld .slick-prev{left:20px;background-image:url('/images/sub/card-prev.png');background-position:0 50%;}
.card-sld .slick-next{right:20px;background-image:url('/images/sub/card-next.png');background-position:100% 50%;}
.card-sld .slick-dots{display:flex;position: absolute;left:50%;bottom:20px;transform:translateX(-50%);}
.card-sld .slick-dots li{padding:0 5px;}
.card-sld .slick-dots li button{display:block;width:10px;height:10px;border-radius:50%;background-color:rgba(255,255,255,.6);transition:.3s;border:none;font-size:none;font-size:0;}
.card-sld .slick-dots li.slick-active button{background-color: #fff;}