@charset "utf-8"; /*------------------------------------------------------------------- 2026 리뉴얼 공통 -------------------------------------------------------------------*/ #wrap.main{padding-top: 8.4rem; font-size: 1rem;} #wrap.main #content.container #detail_content{width: 100%; max-width: calc(1200px + 4rem); margin: 0 auto; padding: 0 2rem;} #wrap #content.container #detail_content .tits{display: block; position: relative; padding-top: 1.6rem; color: #151515; font-size: 3.3rem; font-weight: 700; line-height: 1.2;} #wrap #content.container #detail_content .tits:before{content: ""; position: absolute; top: 0; left: 0; width: 3.4rem; height: 0.4rem; background-color: #FC704F;} #wrap #content.container #detail_content .tits:after{content: ""; position: absolute; top: 0; left: 0; width: 0.4rem; height: 0.4rem; background-color: #481D12;} #wrap.main #content.container #detail_content .ani{opacity: 0; transform: translateY(5rem); transition: all 0.7s ease-out;} #wrap.main #content.container #detail_content .ani.show{opacity: 1; transform: translateY(0);} h4{ font-size: 23px; margin: 38px 0 0 0; font-weight: 600; color: #e57373;} /*------------------------------------------------------------------- main_01 -------------------------------------------------------------------*/ #main_01{position: relative; padding: 7rem 0 10rem;} #main_01:before{content: ""; display: block; position: absolute; top: 0; left: 50%; z-index: -1; width: 100vw; height: 100rem; background: linear-gradient(180deg, #c6dfff 0%, #FFFFFF 38%, #FFFFFF 100%); transform: translateX(-50vw);} #main_01:after{content: ""; opacity: 0; display: block; position: absolute; top: 0; left: 50%; z-index: -1; width: 100vw; height: 42.5rem; background: url(../../images/main/main_top_bg.png) no-repeat top center / 100% auto; transform: translateX(-50vw); animation: main_01 1.4s ease-in-out; animation-fill-mode: both;} #main_01 .in{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; gap: 8rem; } #main_01 .in .l{flex: 1;} #main_01 .in .l .titss{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; gap: 1.7rem; color: #151515; font-size: 3.6rem; font-weight: 900; line-height: 1;} #main_01 .in .l .titss em{color: #717171; font-size: 0.667em; font-size: 500;} #main_01 .in .l .imgs{overflow: hidden; display: block; position: relative; width: 100%; height: 0; margin-top: 2.5rem; padding-top: 56.25%; border-radius: 1rem; /* box-shadow: 8px 8px 30px 0px rgba(0, 0, 0, 0.1);*/} #main_01 .in .l .imgs img{display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%,-50%);} #main_01 .in .l .desc{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; gap: 3rem; margin-top: 2rem;} #main_01 .in .l .desc span{flex: 1;} #main_01 .in .l .desc span em{display: block; width: 100%; color: #FC704F; font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -0.04rem;} #main_01 .in .l .desc span strong{display: block; width: 100%; margin-top: 1.2rem; color: #151515; font-size: 3.4rem; font-weight: 500; line-height: 1.25;} #main_01 .in .l .desc span strong b{display: block; font-weight: 700;} #main_01 .in .l .desc a{display: block; padding: 1.2rem 1.8rem; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.032rem; background-color: #fff; color: #555; border: 1px solid #555; border-radius: 1rem; transition: all 0.2s linear;} #main_01 .in .l .desc a:hover{background-color: #FF4013; border-color: #FF4013; color: #fff;} #main_01 .in .r{width: 43.8rem;} #main_01 .in .r .t_wrap{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 2rem;} #main_01 .in .r .t_wrap strong{display: block; margin-right: auto; color: #FC704F;; font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -0.048rem;} #main_01 .in .r .t_wrap .ctrl{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.8rem;} #main_01 .in .r .t_wrap .ctrl a{display: block; width: 4.4rem; height: 4.4rem; text-indent: -9999px; background: #FFF url(../../images/main/main01_img02.svg) no-repeat center center / 100% auto; border: 1px solid #DDD; border-radius: 50%; transition: all 0.2s linear;} #main_01 .in .r .t_wrap .ctrl a.next{transform: rotate(180deg);} #main_01 .in .r .t_wrap .ctrl a:hover{background-color: #FF4013; border-color: #FF4013; background-image: url(../../images/main/main01_img03.svg);} #main_01 .in .r .swiper{height: 42rem; margin-top: 2.4rem; border-top: 2px solid #333;} #main_01 .in .r .swiper .swiper-wrapper{height: 100%;} #main_01 .in .r .swiper .swiper-wrapper .swiper-slide{display: flex; flex-wrap: nowrap; flex-direction: row-reverse; align-content: center; justify-content: flex-end; align-items: center; gap: 3rem; /*height: calc(100% / 3) !important;*/ padding: 2rem 0 2rem 1rem; border-bottom: 1px solid #EEE;} #main_01 .in .r .swiper .swiper-wrapper .swiper-slide strong{overflow: hidden; display: flex; display: -webkit-box; flex: 1; height: auto; color: #222; font-size: 1.7rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.034rem; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis;} #main_01 .in .r .swiper .swiper-wrapper .swiper-slide:hover strong{text-decoration: underline; text-underline-position: under;} #main_01 .in .r .swiper .swiper-wrapper .swiper-slide .imgs{overflow: hidden; position: relative; width: 36.076%; height: 0; padding-top: 22.834%; border-radius: 1rem;} #main_01 .in .r .swiper .swiper-wrapper .swiper-slide .imgs img{display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%,-50%); transition: all 0.2s linear;} #main_01 .in .r .swiper .swiper-wrapper .swiper-slide:hover .imgs img{width: 110%; height: 110%;} #main_01 .in .r .only-2{margin-top: 2.4rem; border-top: 2px solid #333;} #main_01 .in .r .only-2 a{display: flex; flex-wrap: nowrap; flex-direction: row-reverse; align-content: center; justify-content: flex-end; align-items: center; gap: 3rem; padding: 1.6rem 0 1.6rem 1rem; border-bottom: 1px solid #EEE; font-size: 1.8rem;} #main_01 .in .r .only-2 .imgs{overflow: hidden; position: relative; height: 0; padding-top: 22.834%; border-radius: 1rem; flex: 1 0 39%;} #main_01 .in .r .only-2 .imgs img{display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%,-50%); transition: all 0.2s linear;} @keyframes main_01 { 0% {opacity: 0; transform: translateX(-50vw) translateY(2rem);} 50% {transform: translateX(-50vw) translateY(0);} 100% {opacity: 1; transform: translateX(-50vw) translateY(0);} } /*------------------------------------------------------------------- main_02 -------------------------------------------------------------------*/ #main_02{position: relative; padding: 9rem 0;} #main_02:before{content: ""; display: block; position: absolute; top: 0; left: 50%; z-index: -1; width: 100vw; height: 100%; background-color: #F8F8F8; transform: translateX(-50vw);} #main_02 .tits{display: flex !important; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 2rem;} #main_02 a.tits-more{display: block; width: 5rem; height: 5rem; margin-left: auto; background: #fff url(../../images/main/main02_img01.svg) no-repeat center center / 100% auto; text-indent: -9999px; border-radius: 50%; transition: all 0.2s linear; transform: rotate(0);} #main_02 a.tits-more:hover{transform: rotate(180deg);} #main_02 .in{margin-top: 3.2rem;} #main_02 .in .list{border-top: 2px solid #151515; counter-reset: section;} #main_02 .in .list >li{border-bottom: 1px solid #DDD; counter-increment: section;} #main_02 .in .list >li >.question{display: block; position: relative; padding: 2.4rem 5.2rem; color: #151515; font-size: 2rem; font-weight: 500;} #main_02 .in .list >li >.question:before{content: counter(section); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: absolute; top: 2.2rem; left: 1rem; width: 3rem; height: 3rem; color: #555; font-size: 1.6rem; font-weight: 500; background-color: #FFF; border-radius: 0.3rem; transition: all 0.2s linear;} #main_02 .in .list >li >.question.on:before{background-color: #FC704F; color: #fff;} #main_02 .in .list >li >.question span{display: block; position: absolute; top: 2.6rem; right: 1rem; width: 2.4rem;height: 2.4rem; text-indent: -9999px; background: url(../../images/main/main02_img02.svg) no-repeat center center / 100% auto; transform: rotate(180deg);} #main_02 .in .list >li >.question.on span{transform: rotate(0);} #main_02 .in .list >li >.answer{display: none; position: relative; padding: 3.2rem; color: #2D2D2D; font-size: 1.7rem; font-weight: 400; line-height: 1.4; letter-spacing: -0.034rem; border-top: 1px solid #DDD; background-color: #FFF;} #main_02 .in .list >li >.answer:before{content: ""; display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background-color: #003863;} #main_02 .in .list >li >.answer .arrow{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 0.8rem; margin-top: 2.4rem;} #main_02 .in .list >li >.answer .arrow a{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; padding: 1.24rem 1.4rem; font-size: 1.6rem; font-weight: 500; color: #fff; background-color: #FC704F; border-radius: 0.4rem; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05); transition: all 0.2s linear;} #main_02 .in .list >li >.answer .arrow a:hover{background-color: #FF4013;} /*------------------------------------------------------------------- main_03 -------------------------------------------------------------------*/ #main_03{margin-top: 12rem;} #main_03 .in{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 6rem;} #main_03 .in .tits{width: 18.4rem;} #main_03 .in ul{overflow: hidden; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; flex: 1; border-top: 1px solid #151515; } #main_03 .in ul >li{position: relative; width: 50%;} #main_03 .in ul >li:before{content: ""; display: block; position: absolute; top: 50%; left: 100%; width: 1px; height: calc(100% - 1.6rem - 1.6rem); background-color: #DDD; transform: translateY(-50%);} #main_03 .in ul >li:nth-child(even):before{ display: none;} #main_03 .in ul >li:after{content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100vw; height: 1px; background-color: #EEE;} #main_03 .in ul >li >a{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; position: relative; min-height: 7.6rem; padding: 1.6rem 7.4rem 1.6rem 2.4rem; color: #222; font-size: 1.7rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.034rem; transition: all 0.2s linear;} #main_03 .in ul >li >a:hover{color: #FC704F;} #main_03 .in ul >li >a:before{content: ""; display: block; position: absolute; top: 2.1rem; right: 2.4rem; width: 3.2rem; height: 3.2rem; background: url(../../images/main/main03_img01.svg) no-repeat center center / 100% auto; transition: all 0.2s linear;} #main_03 .in ul >li >a:hover:before{background-image: url(../../images/main/main03_img02.svg);} /*------------------------------------------------------------------- main_04 -------------------------------------------------------------------*/ #main_04{margin-top: 12rem;} #main_04 .in{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 6rem;} #main_04 .in .tits{width: 18.4rem;} #main_04 .in ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; flex: 1; gap: 1.6rem;} #main_04 .in ul li{width: calc((100% - 1.6rem - 1.6rem) / 3)} #main_04 .in ul li a{overflow: hidden; display: block; position: relative; width: 100%; height: 0; padding-top: 100%; border-radius: 1rem;} #main_04 .in ul li a:before{content: ""; display: block; position: absolute; top: 1.6rem; right: 1.6rem; width: 3.2rem; height: 3.2rem; background: url(../../images/main/main04_img01.svg) no-repeat center center / 100% auto;} #main_04 .in ul li a img{display: block; position: absolute; top: 50%; left: 50%; z-index: -1; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%,-50%); transition: all 0.2s linear;} #main_04 .in ul li a:hover img{width: 110%; height: 110%;} #main_04 .in ul li a strong{display: block; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; padding: 2.4rem 1.6rem; line-height: 1.3; color: #FFF; font-size: 2rem; font-weight: 600; letter-spacing: -0.04rem;background: linear-gradient(to top, rgba(0,0,0,1), transparent);;} /*------------------------------------------------------------------- main_05 -------------------------------------------------------------------*/ #main_05{position: relative; margin-top: 10.5rem; padding: 8.1rem 0;} #main_05:before{content: ""; display: block; position: absolute; top: 0; left: 50%; z-index: -1; width: 100vw; height: 100%; background: #5A2417 url(../../images/main/main05_img01.jpg) no-repeat center center / auto 100%; transform: translateX(-50vw);} #main_05 .in{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1.4rem 2rem;} #main_05 .in .titss{display: block; margin-right: auto;color: #fff; font-size: 3rem; font-weight: 400; line-height: 1.2;} #main_05 .in .titss b{font-weight: 600;} #main_05 .in ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1rem 4.7rem;} #main_05 .in ul li{} #main_05 .in ul li a{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.6rem;} #main_05 .in ul li a img{display: block; width: 3.2rem;} #main_05 .in ul li a span{display: block; font-weight: 500; line-height: 1; color: #fff; font-size: 1.7rem; letter-spacing: -0.034rem;} #main_05 .in ul li a:hover span{text-decoration: underline; text-underline-position: under;} /*------------------------------------------------------------------- 컨텐츠 공통 -------------------------------------------------------------------*/ .tit_wrap{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; gap: 2rem; margin-bottom: 5rem;} .tit_wrap.tit_wrap-type2{ margin-bottom: 3rem} .tit_wrap strong{display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 1.1rem; flex: 1; color: #151515; font-size: 3.8rem; font-weight: 700; line-height: 1.3;} .tit_wrap strong em{display: inline-block; padding: 0.67rem 2.1rem; color: #fff; line-height: 1.4; font-size: 1.7rem; font-weight: 600; background-color: #FC704F; border-radius: 3rem;} .tit_wrap .function_lst{display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.6rem;} .tit_wrap .function_lst >li{position: relative;} .tit_wrap .function_lst >li .btn_ai, .tit_wrap .function_lst >li .btn_share, .tit_wrap .function_lst >li .btn_print{display: block; width: 3.6rem; height: 3.6rem; padding: 0; border: 1px solid rgba(21, 21, 21, 0.12); border-radius: 0.6rem; background: #fff url(../../images/contents/re_img01.svg) no-repeat center center / 100% auto; transition: all 0.2s linear;} .tit_wrap .function_lst >li .btn_ai{background-color: #003863; border-color: #003863; background-image: url(../../images/contents/re_img03.svg);} .tit_wrap .function_lst >li .btn_print{background-image: url(../../images/contents/re_img02.svg);} .tit_wrap .function_lst >li .btn_share:hover, .tit_wrap .function_lst >li .btn_print:hover{transform: translateY(-2px); box-shadow: -3px 3px 3px rgba(21, 21, 21, 0.12);} .tit_wrap .function_lst >li .btn_ai:hover{transform: translateY(-2px); box-shadow:-3px 3px 3px rgba(110, 140, 197, 0.25);} .tit_wrap .function_lst >li >ul{opacity: 0; visibility: hidden; display: flex; flex-wrap: wrap; flex-direction: column; align-content: flex-start; justify-content: flex-start; align-items: flex-start; position: absolute; top: calc(100% + 2px); left: 0; width: 3.6rem; background-color: #fff; border: 1px solid rgba(21, 21, 21, 0.12); border-radius: 0.6rem; transition: all 0.2s linear;} .tit_wrap .function_lst >li .btn_share.active + ul{opacity: 1; visibility: visible; z-index: 1;} .tit_wrap .function_lst >li >ul >li{width: 100%; height: 3.6rem; border-top: 1px solid rgba(21, 21, 21, 0.12);} .tit_wrap .function_lst >li >ul >li:first-child{border-top: 0;} .tit_wrap .function_lst >li >ul >li >a{display: block; position: relative; width: 100%; height: 100%; text-indent: -9999px;} .tit_wrap .function_lst >li >ul >li >a img{display: block; width: 2.5rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} .subscribe_frm{margin-top: 3rem;} .subcont .cont-style:last-child{padding-bottom: 0;} .thumb.full{text-align: center;} .thumb.full figure{display: inline-block; position: relative; width: auto; margin: 0 auto;} .photo_mb{text-align: right;} .photo_btn{display: inline-flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.6rem; padding: 1rem; color: #fff; font-size: 1.6rem; font-weight: 500; background-color: rgba(0, 0, 0, 0.60); border-radius: 0.4rem; transition: all 0.2s linear;} .thumb figure .photo_btn{position: absolute; bottom: 0.8rem; right: 0.8rem;} .photo_btn:hover{background-color: rgba(0, 0, 0, 0.80); color: #fff;} .photo_btn:after{content: ""; display: block; width: 1.6rem; height: 1.6rem; background: url(../../images/contents/re_img07.svg) no-repeat center center / 100% auto;} .photo_btn span{line-height: 1;} .photo_modal{display: none; position: fixed; top: 0; left: 0; z-index: 1111; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.7); text-align: center;} .photo_mb.active .photo_modal{display: block;} .photo_modal .in{display: flex; flex-wrap: wrap; align-content: space-between; justify-content: center; align-items: center; gap: 1rem 0; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; height: 100%; padding: 6.3vh 2rem 5.2vh; transform: translate(-50%,-50%);} .photo_modal .in .p_wrap{display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 4rem; width: auto; max-width: 100%; /*max-width: 1920px;*/ margin: 0 auto;} .photo_modal .in .p_wrap .prev, .photo_modal .in .p_wrap .next{display: block; width: 8rem; height: 8rem; background: url(../../images/contents/re_img09.svg) no-repeat center center / 100% auto; text-indent: -9999px;} .photo_modal .in .p_wrap .next{transform: rotate(180deg);} .photo_modal .in .p_wrap .prev.swiper-button-lock, .photo_modal .in .p_wrap .next.swiper-button-lock{display: none; !important;} .photo_modal .in .p_wrap .swiper{width: 100%; max-width: 1200px;} .photo_modal .in .p_wrap .swiper .swiper-wrapper{align-items: center;} .photo_modal .in .p_wrap .swiper .swiper-wrapper .swiper-slide{display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;} .photo_modal .in .p_wrap .swiper .swiper-wrapper .swiper-slide strong{display: block; width: 100%; margin-bottom: 0; font-size: 2rem; font-weight: 500; line-height: 1.2; color: #fff;} .photo_modal .in .p_wrap .swiper .swiper-wrapper .swiper-slide img{display: block; width: 100%; height: 80vh; object-fit: contain; margin: 0 auto;} .photo_modal .in .ac_close{display: block; width: 100%;} .photo_modal .in .ac_close a{display: block; width: 5rem; height: 5rem; margin: 0 auto; background: rgba(10, 10, 10, 0.8) url(../../images/contents/re_img08.svg) no-repeat center center / 100% auto; border-radius: 50%; text-indent: -9999px; transform: rotate(0); transition: all 0.2s linear;} .photo_modal .in .ac_close a:hover{transform: rotate(180deg);} .q_link{position: fixed; top: calc(8.4rem + 6rem); left: 50%; width: 100%; max-width: calc(1848px); transform: translateX(-50%);} .q_link >ol{counter-reset: q_link; position: relative; left: 2rem; width: 100%; max-width: 26rem; border-top: 1px solid #EEE;} .q_link >ol >li{counter-increment: q_link; border-bottom: 1px solid #EEE;} .q_link >ol >li >a{display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center; position: relative; min-height: 6.8rem; padding: 2rem 1.4rem 2rem 4.8rem; color: #5B5B5B; font-size: 1.5rem; font-weight: 500; line-height: 1.2;} .q_link >ol >li >a:hover, .q_link >ol >li.active >a{color: #101010;} .q_link >ol >li >a:before{content: counters(q_link,""); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: absolute; top: 2.2rem; left: 1.4rem; width: 2.6rem; height: 2.6rem; color: #151515; font-size: 1.3rem; font-weight: 500; background-color: #F5F5F5; border: 1px solid #DDD; border-radius: 0.3rem; transition: all 0.2s linear;} .q_link >ol >li.active >a:before{background-color: #003863; border-color: #003863; color: #fff;} .fs-6{font-size: 1.6rem !important;} /*타임머신*/ #mcnts1{background-image:url(../../images/main/mcnts1_bg.jpg); background-size:cover;} #mcnts1 .h2_desc{display:block;position:absolute;top:50%;right:0;width:20px;height:181px;margin-top:-91px;background:url(../../images/main/mcnts1_h2_desc.png) no-repeat 50% 0;font-size:0;line-height:0;} #mcnts1 > .mcnts_inner_wrap{padding:125px 0 110px} #mcnts1 a{display:block} #mcnts1 h3{display:block;position:relative;float:left;width:54%;padding-bottom:64px;font-weight:700;font-size:2.6em;line-height:1.21739em;color:#fff;letter-spacing:-0.04347em} #mcnts1 h3:after{display:block;position:absolute;bottom:0;left:0;width:1px;height:35px;background:#fff;content:""} #mcnts1 h3 > small{font-size:0.7em;} #mcnts1 h3 .small{display:block;margin-top:15px;font-weight:400;font-size:0.522em;line-height:1.333em;color:#fff;letter-spacing:-0.041666em} #mcnts1 h3 .point {color: #fc6f4e;} #mcnts1 .desc{float:left;width:46%;padding-right:80px;font-size:0.875em;line-height:1.71428em;color:#fff;letter-spacing:-0.03571em;text-align:justify} #mcnts1 .desc > .chinese{line-height:1.71428em} #mcnts1 .desc > .more{display:block;width:120px;padding:0 20px;margin-top:20px;border:1px solid #fff;} #mcnts1 .desc > .more > em{display:block;background:url(../../images/main/mcnts2_link_arrow.png) no-repeat 100% 50%;line-height:1.71428em;color:#fff} /*메인*/ /*비쥬얼*/ .all_menu .inner > ul > li{padding:0 1em 0 1.4em;} .visual_wrap,.visual_wrap .visual{display:block;position:relative} .visual_wrap .visual:after{position:absolute;top:0;left:0;width:100%;height:100%;content:'';z-index:-1; background-size:cover;} .visual_wrap .visual{position:relative;max-width:1000px;min-height:232px;margin:0 auto;background:url(../../images/main/visual_img.png) no-repeat center/cover;} .visual_wrap .visual_txt{position:relative;max-width:1000px;margin:0 auto;font-family: 'yg-jalnan';padding:2.6rem 2.5rem 0;display:flex;justify-content: space-between;align-items: flex-end;align-items: center;} .visual_wrap .visual_txt .btn{width:150px;height:48px;line-height:47px;border:1px solid #000;font-family:'Noto sans kR',Sans-serif;color:#000;display:inline-block;text-align:center;-webkit-transition:all .3s;transition:all .3s;} .visual_wrap .visual_txt .btn:hover{background:#000;color:#fff;} .visual_wrap .visual_txt .text{display:flex;flex-direction: column;justify-content: space-between;height:100%;} .visual_wrap h2{display:inline-block;vertical-align:middle;width:127px;height:56px;background:url(../../images/main/volume.png) no-repeat center/cover;font-size:0;line-height:0;position:absolute;top:15px;right:30px;} .visual_wrap .h2_desc{display:block;color:#a0a2a9;font-size:1.63em;} .visual_wrap .h2_desc img {padding-left:1.4rem;} .visual_wrap h3{position:relative;line-height:1.31739em;letter-spacing:-0.04347em;margin:0.8rem 0 1.6rem;font-weight: 400;} .visual_wrap h3 > a{display:block;line-height: 1.31739em;color:#202020;font-size:1em;letter-spacing: -.5px;} .visual_wrap h3 em{line-height:1.41739em;letter-spacing: -1.2px;display:block;font-size: 1.93em;} .visual_wrap h3 .small{display:block;margin-top:15px;font-weight:400;font-size:0.522em;line-height:1.333em;color:#fff;letter-spacing:-0.041666em} .visual_wrap h3 > p{line-height:1.21739em;letter-spacing: -1.2px;display:block;font-size: 2.4em;} .notice_link_sub_txt{display:block; font-size:0.7em;} /*서브비주얼*/ .subvisual_wrap{display:block;position:relative;max-width:1000px;overflow:hidden;margin:auto;} .subvisual_wrap .subvisual{display:block;position:relative;max-width:1000px;margin:0 auto;} .subvisual_wrap .category{display:block;position:relative;margin-bottom:1.1rem;} .subvisual_wrap .category:after{clear:both;display:block;content:""} .subvisual_wrap .category strong{display: inline-block; padding: 0.67rem 2.1rem; color: #fff; line-height: 1.4; font-weight: 600; background-color: #FC704F; border-radius: 3rem;} .subvisual_wrap .category strong em{color:#fc6f4e} .depth{display:block;position:relative;font-size:3.8rem;line-height:1.2;color:#151515;letter-spacing:0; font-weight: 700;} .depth em{font-size:1.7rem;display: inline-block;} .depth b{color:#4569AB;font-weight: 400;} .subcont .depth{margin-bottom:.9em;} .subcont .depth + .sub-tit{margin-top:1rem;margin-bottom:2rem;} .subvisual_wrap h1 > small{font-size:0.7em;} .subvisual_wrap .h1_desc{display:block;position:relative;margin-top:20px;font-size:1.4em;line-height:1.5em;letter-spacing:-0.05em;color:#262626;font-weight:bold;font-family: 'yg-jalnan';} /*메인컨텐츠*/ .mcnts,.mcnts_inner_wrap{display:block;position:relative} .mcnts{background:no-repeat 50% 0} .mcnts_inner_wrap{max-width:1000px;margin:0 auto;} .mcnts_inner_wrap:after{clear:both;display:block;content:""} /*기획연재*/ .txt-figure > p{position:absolute; top:0; padding:25% 10%; left:0; height:100%; color:#555; text-align:justify;} /*타임머신*/ #mcnts1{background-image:url(../../images/main/mcnts1_bg.jpg); background-size:cover;} #mcnts1 .h2_desc{display:block;position:absolute;top:50%;right:0;width:20px;height:181px;margin-top:-91px;background:url(../../images/main/mcnts1_h2_desc.png) no-repeat 50% 0;font-size:0;line-height:0;} #mcnts1 > .mcnts_inner_wrap{padding:125px 0 110px} #mcnts1 a{display:block} #mcnts1 h3{display:block;position:relative;float:left;width:54%;padding-bottom:64px;font-weight:700;font-size:2.6em;line-height:1.21739em;color:#fff;letter-spacing:-0.04347em} #mcnts1 h3:after{display:block;position:absolute;bottom:0;left:0;width:1px;height:35px;background:#fff;content:""} #mcnts1 h3 > small{font-size:0.7em;} #mcnts1 h3 .small{display:block;margin-top:15px;font-weight:400;font-size:0.522em;line-height:1.333em;color:#fff;letter-spacing:-0.041666em} #mcnts1 h3 .point {color: #fc6f4e;} #mcnts1 .desc{float:left;width:46%;padding-right:80px;font-size:0.875em;line-height:1.71428em;color:#fff;letter-spacing:-0.03571em;text-align:justify} #mcnts1 .desc > .chinese{line-height:1.71428em} #mcnts1 .desc > .more{display:block;width:120px;padding:0 20px;margin-top:20px;border:1px solid #fff;} #mcnts1 .desc > .more > em{display:block;background:url(../../images/main/mcnts2_link_arrow.png) no-repeat 100% 50%;line-height:1.71428em;color:#fff} /*뉴스*/ .thumb_wrap.three_ > li:first-child {width:100%;} /*77호*/ .news3 .txtp + .basic_box{margin-top:40px;} .basic_box + .thumb_wrap{margin-top:0;} .mcnts_inner_wrap h3{display:block;margin:0 0 25px;font-size:1.875em;line-height:1.333em;color:#000;letter-spacing:0;text-align:center;font-family:'yg-jalnan';font-weight: 400;} .mcnts_inner_wrap h3 span{position:relative;} .mcnts_inner_wrap h3 span:before{position:absolute;top:-5px;right:-18px;width:10px;height:10px;background:#fc6f4e;border-radius:50%;content:'';} #mcnts2{padding:57px 0 70px} #mcnts2 .news_lst{display:flex;position:relative;justify-content: center;gap:1.5rem;/*padding:0 5rem;width:calc(100% + 25px);*/} #mcnts2 .news_lst > li {flex:1;} #mcnts2 .news_lst a{display:block;position:relative;overflow:hidden;transition:all .3s;} #mcnts2 .news_lst a:hover span{text-decoration:underline;} #mcnts2 .news_lst a .img{display: block; overflow: hidden;} #mcnts2 .news_lst a img{width:100%;transition:all .3s;} #mcnts2 .news_lst a:hover img{transform:scale(1.05);} #mcnts2 .news_lst a > .caption{display:block;width:100%;font-weight:600;font-size:1.15em;line-height:1.4em;letter-spacing:-0.7px;text-align:center;position:relative; background:#fff;left:50%;transform: translateX(-50%);margin-top:4px;} #mcnts2 .news_lst a > .caption:after{width:218px;height:25px;content:'';background:#fff;position: absolute; bottom:100%; left:50%; transform: translateX(-50%);margin-bottom: 4px;} #mcnts2 .news_lst li{/*margin-right:25px;width:calc(100% - 25px) !important;*/} /*뉴스슬라이드*/ .news_lst .slick-arrow{background:#fc6f4e;border-radius:50%;width:38px;height:38px;text-align:center;line-height:35px;color:#fff;font-size:1.5em;position:absolute;top:44%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border:1px solid #fc6f4e;-webkit-transition:all .1s ease;transition:all .1s ease;} .news_lst .slick-arrow:hover{background:none;color:#fc6f4e;} .news_lst .slick-arrow.slick-prev{left:0;} .news_lst .slick-arrow.slick-next{right:25px;} #mcnts2 .notice_link{display:block;position:relative} #mcnts2 .notice_link:after{clear:both;display:block;content:""} #mcnts2 .notice_link > li{float:left;width:50%;min-height:130px;background:no-repeat 50% 0} #mcnts2 .notice_link > li.full{width:100%;} #mcnts2 .notice_link > .no1{background: url(../../images/main/mcnts2_link_bg1.jpg) no-repeat right 0/cover;} #mcnts2 .notice_link > .no2{background: url(../../images/main/mcnts2_link_bg2.jpg) no-repeat right 0/cover;} #mcnts2 .notice_link a{display:block;padding:30px 35px;font-size:1.500em;line-height:1.333em;color:#fff;letter-spacing:-0.041666em} #mcnts2 .notice_link span{line-height:1.333em;} #mcnts2 .notice_link a > .link{display:block;width:120px;padding:0 25px;margin-top:12px;border:1px solid #fff;font-size:0.583em;line-height:1.7142em;color:#fff;letter-spacing:-0.03571em;} #mcnts2 .notice_link a > .link > em{display:block;background:url(../../images/main/mcnts2_link_arrow.png) no-repeat 100% 50%} #mcnts2 .notice_link > .no1 .point{color: #fcaf3b;} #mcnts2 .notice_link > .no1 i{background:url(../../images/main/mcnt2_link_img1.gif) no-repeat 0 0/100% auto;display:block;float:left;width:50px;height:50px;margin:5px 20px 0 0;} #mcnts2 .notice_link > .no2 .small_txt {display: block; color: #57b6e6; font-size: 0.6em; line-height: 1;} p.alert{margin-top:35px;color:#fc6f4e;letter-spacing:-0.05em; text-align:center;} .table_de{width:100%;margin-top:10px;border:0 none;} .table_de table {width:100%} .table_de thead th{font-size:15px;color:#fff;background:#fc6f4e;border-left:1px solid #ad452c;padding:10px 0;} .table_de thead th:first-child{border-left:0 none;} .table_de tbody td{border-bottom:1px solid #b4b7bf;border-left:1px solid #b4b7bf;font-size:14px;color:#404040;padding:10px 20px;} .table_de tbody td:first-child{border-left:0 none;} .table_de tbody td:last-child{border-right:0 none;} .table-img{margin:25px 0 35px;} .table-img tbody td{padding:20px;} .table-img tbody td.img-td{padding:20px 80px;} .table_de.table_gray thead th{border-bottom:1px solid #b4b7bf;font-size:15px;color:#404040;background:#f8f8f8;border-left:1px solid #b4b7bf;padding:10px;border-top: 1px solid #b4b7bf;} .table_de.table_gray thead th:last-child{border-right:1px solid #b4b7bf;} .table_de.table_gray tbody td:first-child{border-left: 1px solid #b4b7bf;} .table_de.table_gray tbody:first-child td:last-child{border-right: 1px solid #b4b7bf;} [class^="bul-list"]{overflow:hidden;} [class^="bul-list"] > li{position:relative; padding-left:30px;} [class^="bul-list"] > li:before{position:absolute; content:'';} .bul-list01 > li{line-height:22px; margin-bottom:7px;} .bul-list01 > li:before{top:0; left:0; width:22px; height:22px; background:#f26b24; color:#fff; border-radius:50%; text-align:center; line-height:22px; font-family:'xeicon'; content:"\e928";} .bul-list02 > li{padding-left:10px;} .bul-list02 > li:before{width:2px; height:1px; background:#555; left:0; top:11px;} .bul-list03{margin:25px 0 40px;} .bul-list03 > li{padding-left:0;} .bul-list03 > li + li{margin-top:5px;} .bul-list03 > li > span{display:inline-block;background:#1aa9aa;height:30px;margin-right:20px;line-height:30px;color:#fff;padding:0 40px;border-radius:15px;} .bul-list04 > li{padding-left:10px;} .bul-list04 > li:before{width:3px; height:3px; background:#1aa9aa; left:0; top:11px;} .bul-list05 > li{padding-left:15px;} .bul-list05 > li:before{left:0;top:2px;content:'*';} .bul-list06 > li{padding-left:15px;} .bul-list06 > li:before{width:3px;height:3px;background:#fc6f4e;left:0;top:10px;} .bul-list07 > li{padding-left:18px;counter-increment:number;} .bul-list07 > li:before{width:14px;height:14px;border:1px solid #555;border-radius:50%;left:0;top:5px;} .bul-list07 > li:after{position:absolute;left:4px;top:0;content:""counter(number,decimal);font-size:11px;font-weight:bold;} .btn01{display:inline-block;padding:5px 10px;margin:20px 0;background:#1aa9aa;border:1px solid #1aa9aa;color:#fff !important;width:auto;transition:background .3s, color .3s;-webkit-transition:background .3s, color .3s;} .btn01:hover, .btn01:focus{background:#fff;color:#1aa9aa !important;} .float-brief-title{overflow:hidden; margin:35px 0 50px;} .float-brief-title .thumb{display:inline-block; width:48%; overflow:hidden; float:left;} .float-brief-title .figcaption{display:inline-block; width:48%; float:right;} .float-brief-title .thumb .figcaption{width:100%;} /*단신*/ #mcnts3 .mcnts_inner_wrap h3 span:before{background:#4CBDB4;} #mcnts3 > .mcnts_inner_wrap{padding:65px 60px 70px;position:relative;border-radius:40px;overflow: hidden;} #mcnts3 > .mcnts_inner_wrap:before{position:absolute;top:0;left:0;width:100%;height:100%;content:'';z-index:-1;background:#ECFBFA;} #mcnts3 > .mcnts_inner_wrap:after{position:absolute;bottom:-33px;right:0;width:256px;;height:259px;content:'';z-index:-1;background:url(../../images/main/main_bg.png) no-repeat;} #mcnts3 .compass_lst{display:flex;position:relative;flex-wrap:wrap;gap:2.5rem 3rem;} #mcnts3 .compass_lst + h3 {margin-top: 50px;} #mcnts3 .compass_lst li{width: calc(50% - 1.5rem);} #mcnts3 .compass_lst li a{display:block;} #mcnts3 .compass_lst li a > em.num{font-size:1.5em;font-family: 'yg-jalnan';display:block;color:#4CBDB4;transition:all .3s;} #mcnts3 .compass_lst li .text{margin-top:.8rem;} #mcnts3 .compass_lst li .text > *{display:block;} #mcnts3 .compass_lst li .text > strong{color:#000;font-size:1.3em;font-weight:bold;letter-spacing:-0.5px;margin-bottom:13px;position:relative; line-height: 1.3;} #mcnts3 .compass_lst li .text > span{line-height:1.2;white-space: inherit;overflow:hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;font-size:.95em;color:#939393;font-weight:400;} #mcnts3 .compass_lst li .btn_01{width:100px;height:30px;color:#4CBDB4;font-size:.9em;text-align:center;display:inline-block;border:1px solid #4CBDB4;line-height:28px;border-radius:30px;transition:all .3s;margin-top:1rem;} #mcnts3 .compass_lst li a:hover .btn_01{background:#4CBDB4;color:#fff;} #mcnts3 .compass_lst li a:hover .num{font-size:1.55em;} #mcnts3 .compass_lst li.lst1 .text > strong{min-height:4.9rem;} #mcnts4{margin:60px 0 74px;} #mcnts4 .record_lst{overflow:hidden;} #mcnts4 .record_lst > li{float:left;width:33.333%} #mcnts4 .record_lst a{display:block;text-align:center} #mcnts4 .record_lst a:hover img{transform:scale(1.1);} #mcnts4 .record_lst a > .img{display:block;position:relative;overflow:hidden;max-width:213px;margin:0 auto;border-radius:50%} #mcnts4 .record_lst a > .img img{transition:all .3s;} #mcnts4 .record_lst a > .caption{display:block;margin-top:1.9rem;} #mcnts4 .record_lst a > .caption > .title{display:inline-block;font-size:1.500em;line-height:1.25em;color:#fc6f4e;font-family: 'yg-jalnan';position:relative;} #mcnts4 .record_lst a > .caption > .title > i{color:#959595;font-weight:400;font-size:1.25rem;margin:-2px 0 0 2px;transition:all .3s;} #mcnts4 .record_lst a:hover > .caption > .title > i{color:#000;} .mgt30{margin-top:3rem !important;} .mgt5{margin-top:0.5rem !important;} .mgt10{margin-top:1rem !important;} .mgt20{margin-top:2rem !important;} .mgt50{margin-top:5rem !important;} #mcnts4 .record_lst a > .caption > .desc{display:block;font-size:1.125em;line-height:1.333em;color:#000;letter-spacing:-0.05em;font-weight:500;} #mcnts4 .record_lst a > .caption > .desc + .title{margin-top:5px;} .addition-txt{background:#5a3f58; border-radius:20px; padding:15px;color:#fed919 !important;} /* 24-03-20 sns 방문 */ .visite {position:relative;margin:4rem 0 3rem;padding:10px 4.4rem;border:1px solid #f1f2f6;} .visite::after {content:"";display:table;clear: both;} .visite h3 {float: left;position:relative;margin:0.5rem 0 0;padding-right:9.6rem;} .visite h3::after {content:"";display:block;position:absolute;right:0;bottom:-2rem;width:8.9rem;height:7.6rem;background:url("../../images/main/visite_icon.png") no-repeat 50% 50% / 100%;} .visite .tside_menu {float: right; text-align: end;} .visite .tside_menu > li > a {width: 3.3rem;height:3.3rem;background-color:rgba(0,0,0,0);} /*서브컨텐츠*/ .seriesPlan_wrap,.timemachine_wrap,.news_wrap,.sympathy_wrap,.newsbrief_wrap,.foreign_wrap{display:block;position:relative} .foreign_wrap.last {padding-bottom: 0; border-bottom: none;} .news_wrap .reaction_system{display:block;position:relative;padding:25px 0 45px;text-align:center} .news_wrap .reaction_system > strong{display:block;margin-bottom:20px;font-weight:400;font-size:1.250em;line-height:1.5em;color:#333;letter-spacing:-0.0375em} .nationalarchives_wrap{display:block;position:relative;padding-left:270px} .nationalarchives_wrap > .figure{display:block;position:absolute;top:5px;left:0} .autowrap > li:first-child{width:calc(100% - 364px);} .autowrap > li:last-child{width:364px;} /*구독신청*/ .basic_table{border-bottom:3px solid #3b3b3b;width:100%;} .basic_table th{font-weight:600;font-size:1.8rem;} .basic_table th, .basic_table td{text-align:left;padding:0 0 1rem 0;} .basic_table input[type="text"]{border:0 none;width:100%;height:3rem;} .basic_table input:-ms-input-placeholder{color:#b3b3b3;} #privacy{border:1px solid #bcbcbc;padding:2rem;margin:3rem 0 2rem;} #privacy h4{margin-bottom:1.5rem;;} #privacy .list_de{} #privacy .list_de:after{content:"";display:block;clear:both;} #privacy .list_de li{position:relative;padding-left:1.5rem;} #privacy .list_de li:after{content:"";width:0.8rem;height:0.8rem;position:absolute;background:url(../../images/contents/list_bul.png) no-repeat center center / 100% auto;left:0;top:0.7rem;} #privacy .list_de li small{display:block;} .btn_wrap{text-align:center;margin-top:40px;} .btn_wrap span{margin-left:5px;} .btn_wrap span a{padding:14px 60px;border:2px solid #585858;border-radius:25px;box-sizing:border-box;font-weight:600;} .btn_wrap .confirm input[type="submit"]{height:50px;padding:0 45px;background:#fc6f4e;border:0 none;border-radius:25px;font-weight:600;} .description{color: #fc6f4e; /* display:block; */} /*2018 - 추가*/ .brief_title .low-figcaption{width:45%;padding:50px;} .brief_title.brief_title02 figure img{padding:20px;} .brief_title.brief_title02 p em{font-size:2.2rem;} .brief_title.brief_title02 {background:#81a5ca;} .brief_title.brief_title02 .figcaption:after{display:none;} .responsive-figure{display:none;} .responsive-figure-none{display:block;} .thumb .figcaption .link-figcaption{position:relative; display:inline-block; padding-left:15px; color:#ffd105 !important; transition:all .3s; -webkit-transition:all .3s;} .thumb .figcaption .link-figcaption:hover, .thumb .figcaption .link-figcaption:focus{opacity:.7;} .thumb .figcaption .link-figcaption:before{position:absolute; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); left:0; width:11px; height:13px; content:''; background:url(../../images/contents/bul1.png)no-repeat;} .Additional-explanation{padding:15px 30px; background:#edeeef; color:#333;} .bul2{display:inline-block;width:auto;position:relative;padding:0.4rem 0.8rem 0.4rem 2.4rem;} .bul2:before{position:absolute;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);left: 10px;width:18px;height:18px;content:'';background:url(../../images/contents/bul2.png)no-repeat;} .figure > a{display:block;} .dual3 > .txtp{width:47%;} .dual3 > .dual-img{width:47%;float:left;} .point-color1{color:#ffeb3b;} .point-color2{color:#fc6f4e;} .point-color3{color:#999 !important;} .point-color4{color:#777777;} /*table-half*/ .table-half{display:inline-block; width:49%;} .sources-txt.type2 {padding-left:9px;position:relative;line-height:1.6;border:0 !important} .sources-txt.type2:before{left:0;top:2px;content:'*';position:absolute} .radius-txt a {display:inline-block;background:#fc6f4e;color:#fff;border-radius:30px;padding:0 24px} .radius-txt + .radius-txt {margin-top:7px} .thumb_wrap.third-img li{width:33.3%;} .third-txt li{float:left;width:33.333%;text-align:center;position:relative;} .thumb_wrap.third-img .thumb .figcaption:before{position:absolute;bottom:-9px;left:50%;width:18px;height:18px;transform:rotate(45deg);background: #000;opacity: 0.5;content:'';z-index:999} .thumb_wrap.third-img .thumb .figcaption.b_none:before{display:none} .mgt8{margin-top:.8rem} .thumb_wrap.third-img li:last-child{margin-top:0;} /* #header{z-index:2;max-width:100%;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);position:fixed;width:100%;} #header.fixed{box-shadow: rgba(17, 12, 46, 0.08) 0px 48px 100px 0px;} */ /*영상버튼*/ .thumb.play_link > a{position:absolute;top:50%;right:30px;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#212121;width:320px;height:207px;background:rgb(255,255,255,0.85);-webkit-transition:all .3s;transition:all .3s;} .thumb.play_link{padding:30px;background:#ececec;} .thumb.play_link > a .title{position: absolute; top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);display: block;width: 12.8625em;} .thumb.play_link > a .title em{font-size: 1.375em;font-weight:bold;display:block;} .thumb.play_link > a .title span{font-size:1.1em;opacity:.85;border-bottom:1px solid #b0b0b0;position:relative;display:inline-block;margin-top:13px;} .thumb.play_link > a .title span:before{position:absolute;top:4px;right:-30px;background:url(../../images/contents/play.png) no-repeat;width:23px;height:23px;content:'';} /*2021.03월호*/ .clip{position:relative;display:block;padding-left:26px;font-size:1.1em;margin-top:1.5em;color:#777;} .clip:before{position:absolute;top:4px;left:0;width:18px;height:18px;background:url(../../images/contents/clip.png) no-repeat;content:'';} .depth1{position:relative;display:block;padding:2.5em;color:#777;height:129px;margin:1.8em 0;} .depth1:before{position:absolute;top:0;left:0;width:100%;height:129px;background:url(../../images/contents/solid_bg.jpg) no-repeat center/cover;content:'';z-index:-1;} .thumb.solid_bg{position:relative;color:#fff;padding:3em;} .thumb.solid_bg:before{content:'';background:url(../../images/contents/sub2-4.png) no-repeat;width:524px;height:226px;top:20px;position:absolute;right:0;z-index:-1;} .thumb.solid_bg2{padding:3.5rem 3.5rem 3.5rem 2rem;} .thumb.solid_bg2:before{background:url(../../images/contents/sub2-6.png) no-repeat;height:194px;right:inherit;left:0;} .thumb.solid_bg3:before{background:url(../../images/contents/balon3.png) no-repeat;height:222px;} /*순서*/ .step_wrap{overflow:hidden;width:calc(100% + 3em);} .step_wrap li{float:left;width:33.3333%;padding-right:3em;position:relative;margin-bottom:1rem;} .step_wrap li > span{display:block;height:205px;} .step_wrap li .txtp{text-align:center;} .step_wrap li:before{content:'';background:url(../../images/contents/news_arrow.jpg) no-repeat;width:16px;height:25px;position:absolute;right:1em;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);} .step_wrap li:nth-child(3n+0):before{display:none;} .garden-lst{overflow:hidden;width:calc(100% + 20px);} .garden-lst li{float:left;width:50%;padding-right:20px;position:relative;margin-bottom:2.5em;} .garden-lst li span{display:block;} .garden-lst li .text{margin:auto;max-width:90%;position:relative;background:rgba(227, 221, 217, .85);} .garden-lst li .text>p{padding:1.5em;margin-top:-10px;letter-spacing: -2.7px;font-family: 'Noto Serif KR', serif;} .garden-lst li .text:before{content:'';background:url(../../images/contents/angle.png) no-repeat;position:absolute;top:-35px;right:0;width:52px;height:35px;} /*2021.07.14 말풍선스타일*/ .styletxt{background:#ecf7ed;padding:2rem 2rem 2rem 0;margin-top:2rem;position:relative;} .styletxt.styletxt2{padding:2rem 0 2rem 2rem;background:#ecf7f4;} .styletxt.styletxt3{background:#eceff7;} .styletxt:before{width: 0px;height: 0px;border-left: 37px solid transparent;border-top: 35px solid rgba(128, 199, 131, .15);position: absolute;top: 0px;left: -37px;content: '';} .styletxt.styletxt2:before{left:inherit;right:-37px;border-right:37px solid transparent;border-left:0;border-top: 35px solid rgba(128, 199, 184, .15);} .styletxt.styletxt3:before{border-top: 35px solid #eceff7;} /*2021-09-16*/ .border-box{background:url(../../images/contents/border-box.png) no-repeat;height:161px;padding: 2em;margin-top: 2rem;} .border-box > strong{color:#ea5252;font-weight:500;display:block;line-height:1.5;padding-bottom: 5px;position:relative;} /* .border-box > strong:before{background:url(../../images/contents/border-box.png) no-repeat;height:100%;position:absolute;top:0;left:0;content:'';width:100%;} */ .border-box > span{color:#777777;line-height:1.8;display:block;padding-left:5px;} .txt-left{text-align:left !important;} .bul1 > li{padding-left:10px;position:relative;letter-spacing: -1px;} .bul1 > li:before{content:'';width:3px;height:3px;background:#262223;position:absolute;top:1.1rem;left:0;border-radius:50%;} .img25{width:calc(100% + 1em);overflow:hidden;margin-top:30px;} .img25 li{width:25%;float:left;padding-right:1em;} .bul1 li > strong{display:inline-block;width:5rem;text-align:justify;font-weight:400;vertical-align:middle;} .bul1 li > span{overflow:hidden;vertical-align:middle;} .bul1 li > span.small{padding-left:0;width:auto;display:inline-block;font-size:14px;} /*2021.12.04*/ .bgbox{position:relative;padding:2.6rem 3rem;} .bgbox:before{content:'';background:url(../../images/contents/border-box.png) no-repeat center/cover;width:100%;height:161px;position:absolute;top:0;left:0;z-index:-1;max-width:100%;} .bgbox > strong{padding-bottom:10px;text-align:center;font-size:1.1rem;font-weight:bold;display:block;} .bul3 li{position:relative;padding-left:10px;display:inline-block;vertical-align:middle;padding-right:1rem;margin-bottom:5px;color:#777777;} .bul3 li:before{content:'';width:8px;height:8px;border-radius:50%;background:#f8987b;position:absolute;top:9px;left:0;} .box1{background:#e6e9ee;padding:1.7rem 2.4rem;margin:30px 0;} .box1 .bul1{overflow:hidden;} .box1 .bul1 > li{width:50%;float:left;} .titbox{background-color:#4267b2;color:#fff;font-size:20px;display:block;text-align:center;border-radius:30px;padding:14px;letter-spacing:-1px;margin-top:50px;} .w25{overflow:hidden;padding-top:20px;} .w25 > li{width:25%;float:left;} .box_wrap{border:10px solid #ebedf0;padding:1.7rem 2rem;margin-top:30px;} .box_wrap .tt{font-weight:500; font-size:1.38rem;display:block;text-align:center;margin-bottom:1rem;} .box_wrap .bul1 > li:before{background:#c7c7c7;height:6px;width:6px;overflow:hidden;font-size:1.13em;} .box_wrap .bul1 > li + li{margin-top:3px;} .box_wrap .bul1 > li em{color:#fc5454;} .box_wrap .bul1 > li > em{float:left;width:4.2em;} .box_wrap .bul1 > li > p{overflow:hidden;padding-left:1.3em;color:#050505;} .box_wrap .bul1 > li > p > span{display:inline-block;padding:0 .7rem;color:#fff;background:#050505;border-radius:100px;margin-right:7px;line-height:1.4;} /*09.06 박스 스타일 추가*/ .bbox>.inner{background:#fff;padding:1.2rem 1.8rem;} .bbox>.inner .point{color:#e86a1a;} .bbox .title{font-family:'yg-jalnan';color:#222;font-size:1.65em;display:block;text-align:center;margin-bottom: 1em;} .bbox .bar{display:block;background:#8c2131;border-radius:25px;color:#fff;font-size:1.3em;font-weight:bold;text-align:center;padding:.8rem;margin:2rem 0 1rem;} .bbox .section{overflow:hidden;} .bbox .section > span{width:145px;height:145px;border-radius:50%;text-align:center;line-height:145px;font-size:1.5em;font-family:'yg-jalnan';color:#8c2131;display:inline-block;background:#eff1f1;float:left;} .bbox .section > p{float:left;width:calc(100% - 145px);padding-left:20px;font-size:1.15em;color:#050505;} .box_wrap .three-thumb{margin:0;} .box_wrap .three-thumb > li:nth-child(n+4){margin-top:2rem;} p.tt{font-size:1.3rem;font-weight:500;} .border_gray{border:9px solid #F7F7F7;padding:2.5rem;position:relative;text-align:left;margin-top:2.5rem} .border_gray.t2{padding-top:2.8rem;} .border_gray:has(.posi_tit){margin-top:3.6em;} .border_gray.type1{border-color:#FFF2E0;} .bul1[class*="type"] > li{/*overflow: hidden; font-size: 1.8rem; line-height:1.9; letter-spacing: -0.5px;*/ color: #272727;} .bul1[class*="type"] li > em{width:5.2rem;display: inline-block;color:#e57373;letter-spacing:0;font-weight:600;} /*.bul1[class*="type"] li > p, .bul1[class*="type"] li > div{width:calc(100% - 5.2rem);float:left;letter-spacing: -1px;}*/ .bul1[class*="type"] li:before{background:#e57373;width:4px;height:4px;top:1rem;} .bul1.type3 li{line-height:1.7;} .bul1.type3 li em{color:#c78932;width:4.6rem;} .bul1.type3 li p{width:calc(100% - 4.6rem);} .bul1.type3 li:before{background:#c78932;} .bul1.type4 li em{color:#ed900b;width:auto;} .bul1.type4 li p{width:auto;} .bul1.type4 li:before{background:#ed900b;} .bul1.type5 li em{color:#4267b2;} .bul1.type5 li:before{background:#4267b2;} .bul1.type6 li em{color:#fc6f4e;width: auto;} .bul1.type6 li:before{background:#fc6f4e;} .bul1.type7 li em{color:#878bcf;width: auto;} .bul1.type7 li:before{background:#878bcf;} .bul1.type8 li em{color:#56B989;width: auto;} .bul1.type8 li:before{background:#56B989;} .bul1.type.st2 > li{padding-left:1rem;} .bul1.type.st2 > li:before{content:'▸';width:inherit;height: inherit;border-radius: inherit;background:inherit;top:0;left:0;color:#000;} .bul-type-hipen{} .bul-type-hipen li{ padding-left: 1.6rem; position: relative; line-height: 1.4;margin-bottom: 4px;} .bul-type-hipen li::before{ content: ""; width: 0.8rem !important; height: 0.2rem !important; position: absolute; top: 1.1rem !important; left: 0; background-color: #bebebe !important;} .bul-type-hipen.bul-type-hipen-mb-zero li{ margin-bottom: 0;} .bul1.type2 > li:before{ background:#DF5D67; width:5px; height: 5px; top:0.8rem; } .bul1.type3 > li:before{ background:#56B989; } .bul1.type4 > li:before{ background:#2C98CA; } .bul1.type5 > li:before{ background:#DE6A2B; } .bul1.type2 > li > b{ letter-spacing: -0.9px; display: inline-block; } .pretend{font-family: 'Pretendard';line-height: 1;} .posi_tit{background:#1679AB;color:#fff;border-radius:100px;display:inline-block;padding:0.7em 1.45em;font-size:1.8rem;font-weight:bold;position:absolute;top:-1.6em;left:50%; transform: translateX(-50%);text-align: center;line-height:1;white-space: nowrap;display: flex;align-items: center;gap:10px;justify-content: center;} .posi_tit[class*="st"]{border-radius:10px;background:#304B61;} .posi_tit.t2{background:#E05D67;} .posi_tit.t3{background:#7A7605;} .posi_tit.t4{background:#585A9F;} .posi_tit.t5{background:#5976CC;} .posi_tit.t6{background:#4DA57D;} .posi_tit.t7{background:#B4255C;} .posi_tit.t8{background:#4F804C;} .posi_tit.t9{background:#6254C2;} .posi_tit.t10{background:#4878C0;} .posi_tit.t12{background:#4795D0;} .posi_tit.t13{background:#F4A52F;} .posi_tit.t14{background:#AB8E64;} .rel{text-align: center;margin-bottom: 2rem;} .rel.border_tp{margin-top:3rem;padding-top:3rem;border-top:1px solid #E0E0E0;} .rel .posi_tit{position: static;transform: none;} td.pad0{padding:0 !important;} td.pad0 img{width:100%;} .list1{margin-top:2.5rem;} .list1 .number{width:18px;height:18px;text-align: center;color:#fff;border-radius:50%;background:#fc6f4e;display:inline-block;line-height:18px;font-size:13px;margin-right:5px;} .list1 > li + li{margin-top:5px;} /*23.01 배너추가*/ .banner_list{display:flex;;gap:1.1rem;flex-wrap:wrap;} .banner_list li{flex:1;} .banner_list + .banner_list{margin-top:1.1rem;} .auto_line{display: inline-block;font-family: 'auto';line-height: 1;} .banner_list.t2{display:flex;gap:1.1rem;flex-wrap:wrap;} .banner_list.t2 li{width: calc(50% - 0.55em);flex:auto;} .banner_list.t3{display: grid;grid-template-columns: repeat(6, 1fr);} .banner_list.t3 li:first-child, .banner_list.t3 li:nth-child(2){grid-column: span 3;} .banner_list.t3 li{grid-column: span 2;} .banner_list.t4{display: grid;grid-template-columns: repeat(3, 1fr);gap:1.1rem;} .banner_list li a{display:block;width:100%;color:#fff;font-weight:500;font-size:1.9rem;line-height:1.3;position:relative;overflow:hidden;padding:1.3rem 1.5rem 2.7rem;transition:all .3s;z-index:0;height: 100%;} .banner_list li a:hover{box-shadow: rgba(149, 157, 165, 0.7) 0px 8px 24px;} .banner_list li.st1 > a{background: linear-gradient(90deg, rgba(96,125,195,1) 0%, rgba(119,133,216,1) 100%);} .banner_list li.st2 > a{background: linear-gradient(90deg, rgba(184,116,71,1) 0%, rgba(185,140,54,1) 100%);} .banner_list li.st3 > a{background: linear-gradient(90deg, rgba(82,165,201,1) 0%, rgba(75,201,216,1) 100%);} .banner_list li.st4 > a{background: linear-gradient(90deg, rgba(110,165,117,1) 0%, rgba(151,177,95,1) 100%);} .banner_list li.st5 > a{background: linear-gradient(90deg, rgba(78,167,186,1) 15%, rgba(86,175,189,1) 100%);} .banner_list li.st6 > a{background: linear-gradient(90deg, rgba(81,153,219,1) 15%, rgba(100,174,220,1) 100%);} .banner_list li.st7 > a{background: linear-gradient(90deg, rgba(150, 133, 211, 1) 15%, rgba(146, 133, 213, 1) 100%);} .banner_list li.st8 > a{background: linear-gradient(90deg, rgba(115,125,203,1) 0%, rgba(120,130,206,1) 100%);} .banner_list li.st9 > a{background: linear-gradient(90deg, rgba(125,122,207,1) 0%, rgba(130,127,210,1) 100%);} .banner_list li a i{position:absolute;right:1rem;z-index:-1;bottom:1rem;} .banner_list li a:hover i{animation:up-down .5s infinite ease-in-out alternate;} .banner_list li a:after{content:'';position:absolute;bottom:1.2rem;left:1.9rem;width:35px;height:8px;background:url("../../images/main/banner_arrow.png") no-repeat center/cover;} .banner_list.item4{flex-wrap:wrap;gap:18px 18px} .banner_list.item4 li{flex:none;width:calc(50% - 9px)} .banner_list.item4 li a{padding:1.2rem 1.3rem 0} @keyframes up-down { 0% { transform:translatey(0px); } 100% { transform:translatey(-2px); } } /*0601 css*/ .thumb_wrap li[class*="auto"]{width:auto;} .thumb_wrap li.auto2{padding-right:0;} .link01{display:inline-block;position:relative;transition:all .2s} .link01:before{content:"";position:absolute;left:0;bottom:0;width:100%;border-bottom:2px solid #000;transition:all .2s} .link01[target="_blank"]:after{content:"";display:inline-block;width:15px;height:15px;margin:0 4px;background:url(../../images/contents/icon_external.png) center no-repeat} .link01:hover, .link01:focus{color:#fc6f4e;text-decoration:none !important} .link01:hover:before, .link01:focus:before{border-color:#fc6f4e} .link_lst{margin:1rem 0 3rem} .link_lst li{display:inline-block;margin-bottom:4px} .link_lst a{display:inline-block;padding:15px 18px;font-size:1.125em;line-height:1.125em;color:#050505;border:1px solid #e0e0e0;transition:all .2s} .link_lst a span{display:block;position:relative;padding-left:25px} .link_lst a span:before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;background:url(../../images/contents/clip.png) center no-repeat;background-size:contain;vertical-align:middle} .link_lst a:hover, .link_lst a:focus{border-color:#000} /*0605 css*/ .gray_box{margin-top:2rem;border: 0.5rem solid #edeeef} .gray_box .txt_bx{padding:2rem 2rem 0} .gray_box .tit{display:block;width:100%;padding:0.5rem 0 1rem;background:#edeeef;font-size:1.2rem;color:#212121;text-align: center} .gray_box .thumb_wrap{padding:0 1.5rem;} .color_box1{margin-top:2rem;padding:2rem;background-color:#eeebe9} .color_box1 .color_txt1{color:#9b7f73} .color_box1 .dot_list{margin-left:1rem} /*복원전,복원후 박스*/ .restore_box{margin-top:1rem;} .restore_box li{display: flex;gap:4px;justify-content: space-between;} .restore_box li+li{margin-top:0.5rem;} .restore_box li .tit{width:8.5rem;font-size:1.1rem;font-weight:400;color:#000;background:#edeeef;display:flex;align-items: center;justify-content: center;position:relative;text-align: center;} .restore_box li .tit::before{content:'';background:#edeeef;width:1rem;height:1rem;position:absolute;top:2.1rem;right:-0.5rem;transform: rotate(45deg);} .restore_box li > span{width:calc(100% - 9.5rem);} .restore_box2{margin-top:1.5rem;} .restore_box2 li{display: flex;gap:1rem;} .restore_box2 li .img{flex-shrink: 0;} .restore_box2 li + li{margin-top:1rem;} .restore_box2 .text{position:relative;background:#f1eeec;width:100%;padding:1.7rem 2rem;} .restore_box2 .text:before{content:'';background:#f1eeec;width:1rem;height:1rem;position:absolute;top:2.1rem;left:-0.5rem;transform: rotate(45deg);} .restore_box2 .text b{display: block;font-weight:400;color:#000;font-size:1.12em;margin-bottom:1rem;letter-spacing: -0.5px;} .restore_box2 .text li{color:#777;font-size:1.05em;letter-spacing: -0.3px;} .restore_box2 .text li:before{width:5px;height:5px;background:#c0b6af;} .restore_box3 {margin-top:3rem;} .restore_box3 > ul{display:flex;justify-content: center;gap:0.6rem;} .restore_box3 strong{display: block;text-align: center;padding:0.6rem;color:#fff;font-size:1.3em;background: #A9533E;} .restore_box3 > ul > li:nth-child(2) strong{background:#FC6F4E;} .restore_box3 > ul ul{display: flex;gap:0.6rem;flex-direction: column;} .txtp .circle{color:#fc6f4e;} .txtp .circle:before{content:'';width:4px;height:4px;background:#fc6f4e;display: inline-block;border-radius:50%;vertical-align: middle;margin:-5px 0.3rem 0 0;} .circle_lst{display: flex;gap:2rem;margin-top:1.2rem;} .circle_lst > li{width:13rem;height:13rem;background:#e3ddd9;border-radius:50%;padding:1.8rem 1.6rem 1rem;line-height:1.2;text-align: center;} .circle_lst > li > b{color:#745450;font-size:1.3rem;display: block;} .circle_lst > li > span{display: block;line-height:1.4;margin-top:1rem;color:#777777;} .link{border:1px solid #e0e0e0;background:#f7f7f7;padding:1rem 2rem 1rem 4rem;transition:all .2s;display: inline-block;position:relative;} .link:hover{background:#e0e0e0; text-decoration: underline; text-underline-position: under;} .link:before{content:''; position: absolute; top: 1.3rem; left: 1.8rem; background:url('../../images/contents/link_icon.png') no-repeat center center / 100% auto;width:1.5rem;height:1.5rem; vertical-align: baseline;display: inline-block;} .link_wrap{margin-top:3rem;padding-top:3rem;border-top:1px dashed #dcdcdc;} .flag{display:grid;grid-template-columns: repeat(5, 1fr);gap:.9rem;margin-top:1.3rem;} .flag > li > a{margin:0;display:block;text-align: center;padding:10px 5px;} .flag > li > a img{vertical-align: text-bottom;margin-left:8px;} /*241118*/ .tabl{margin-top:0.7rem;} .tabl b{background:#a0887e;color:#fff;font-weight:500;text-align: center;width:72px;flex-shrink: 0;border-radius:3px; display: flex;align-items: center;justify-content: center;} .tabl > *{display: flex;} .tabl > * + *{margin-top:20px;} .tabl .txt{padding-left:10px;} .tabl .txt span{display: block;font-weight:400;padding-left:1.2rem;position:relative;margin-top:-4px;} .tabl .txt span em{background:#a0887e;border-radius:50%;display:inline-block;color:#fff;width:16px;height:16px;text-align: center;line-height:16px;font-size:11px;vertical-align: middle;position: absolute;left:0;top:7px;} .tabl .txt span + span{margin-top:15px;} /*241212*/ .list_wrap{margin-top:2rem;} .list_wrap > li{position: relative;padding-left:2.5rem;} .list_wrap > li + li{margin-top:2rem;} .list_wrap > li:after{content:'';width:3px;height: calc(100% + 2rem);background: #eceeef;position:absolute;left:10.3px;top:3px;z-index: -1;} .list_wrap > li:last-child:after{display:none;} .list_wrap > li:before{content:'';width:23px;height:23px;border:6px solid #5cb7a5;border-radius:50%;display:inline-block;position:absolute;top:3px;left:0;background:#fff;} .list_wrap > li.t2:before{border-color:#94c9a5;} .list_wrap > li.t3:before{border-color:#e6a239;} .list_wrap > li.t4:before{border-color:#e86f44;} .list_wrap > li.t5:before{border-color:#b6946f;} .list_wrap > li.t6:before{border-color:#7ebe61;} .list_wrap > li > .tit{font-size:1.3em;font-family: 'yg-jalnan';color:#050505;display:block;margin-bottom:1rem;} .list_wrap > li.t1 > .tit em{color:#5cb7a5;} .list_wrap > li.t2 > .tit em{color:#94c9a5;} .list_wrap > li.t3 > .tit em{color:#e6a239;} .list_wrap > li.t4 > .tit em{color:#e86f44;} .list_wrap > li.t5 > .tit em{color:#b6946f;} .list_wrap > li.t6 > .tit em{color:#7ebe61;} .list_wrap > li > .txt{color:#050505;font-size:1.13em;line-height:1.7;} .list_wrap > li > .txt .bul1 > li{color:#050505;} .list_wrap > li > .txt .bul1 > li:before{width:5px;height:5px;background:#454545;} .list_wrap > li > .txt .bul1 > li li{color:#777777;} .restore_box3 > .tt{background:#e3f2fd;padding:1rem;margin:2.5em 0 1rem;} .restore_box3 .thumb_wrap{margin:0;} .restore_box3 .thumb_wrap .img{display:block;} .restore_box3 .thumb_wrap .img img{width:100%;} .restore_box3 .thumb_wrap .txt{font-size: 1.13em;padding:1rem 1.7rem;background:#f5f6f7;border:1px solid #dddfe0;margin-top:12px;position:relative;letter-spacing: -0.7px;} .restore_box3 .thumb_wrap .txt:before{content: '';background: #f5f6f7;width: 1rem;height: 1rem;position: absolute;top: -0.5rem;left: 2rem;transform: rotate(45deg);border:1px solid #dddfe0;border-bottom: 0;border-right: 0;} .restore_box3 .thumb_wrap .txt strong{font-weight:400;color:#000;margin-bottom:6px;display:block;text-align: center;} .restore_box3 .thumb_wrap .txt > p{color:#999999;font-style: italic;} .restore_box3 .thumb_wrap:first-of-type .txt{min-height:11rem;} .restore_box3 .thumb_wrap:last-of-type .txt{min-height:13.2rem;} .bul1.txtp > li{color:#050505;} .bul1.txtp > li:before{top:15px;} .point6{color:#fc6f4e;position:relative;} .point6:before{content:'▲';font-size:.7em;display:inline-block;margin-right:7px;vertical-align: text-bottom;} .point6.s2:before{display: none;} .point6.t1{color:#e57373;} .point6.t2{color:#4cb6ac;} .point6.t3{color:#79bbf0;} .point6.t3:before{color:#79bbf0;} .point7{color: #FC6F4E;} .circle_box{display: flex;gap:1rem;justify-content: center;margin-top:1.2em;} .circle_box > li{border-radius:50%;background:#e3ddd9;width:13rem;height:13rem;text-align: center;padding: 0 0.9rem;} .circle_box > li strong{font-size:1.25em;display:block;color:#745450;padding:2.7rem 0 1rem;} .circle_box > li p{color:#777777;letter-spacing: -1px;font-size:1.1em;} .txtp.list{padding-left:1.5rem;position:relative;line-height: 1.6;} .txtp.list:before{content:'▶';color:#fc6f4e;position: absolute;left:0;} .txtp.list.t2:before{color:#79bbf0;} .txtp.list em{color:#fc6f4e;margin-right:5px;;} .step_list{gap:40px;display: flex;margin-top:10px;/*padding-bottom: 4rem;*/} .step_list > li{flex:1;text-align: center;position:relative;} .step_list > li strong{background:#043763;color:#fff;border-radius:10px;display: block;display: flex;align-items: center;justify-content: center;font-weight:500; padding: 1rem;} .step_list > li strong.t2{background:#EE6D31;} .step_list > li div{border:2px solid #E0E0E0;min-height:25.6rem;border-radius:10px;display: flex;justify-content: center;align-items: center;line-height:1.4;margin-top:5px;padding:1.1rem;position: relative;} .step_list > li p + p{margin-top:1.5rem;} .step_list > li p + p:after{content:'';width: 0; height: 0; border-left : 6px solid transparent; border-right: 6px solid transparent; border-top : 9px solid #555; position:absolute;top:-1.2rem;left:50%;transform: translateX(-50%); } .step_list > li:after{background:url('../../images/contents/arrow.png') no-repeat center/cover;width:27px;height:35px;content: '';position:absolute;right:0;top:50%;left:100%;margin-left:8px;} .step_list > li:last-child:after{display: none;} /*.step_list > li:nth-child(3):before{ content:''; position:absolute;top:100%;left:50%;transform: translateX(-50%) rotate(90deg); background:url('../../images/contents/arrow.png') no-repeat center/cover; width:50px;height:4rem; }*/ .bar_tit{background:#CC5E8D;color:#fff;font-size: 1.13em;display: block;text-align: center;padding:12px;font-weight:500;margin-top:40px;} [class*="col_group_"]{display: flex;} [class*="col_group_"] li{flex:1;} [class*="col_group_"] .figure{border-left:1px solid #E0E0E0;border-bottom:1px solid #e0e0e0;} [class*="col_group_"] li:last-child{border-right:1px solid #e0e0e0;} [class*="col_group_"] .figcaption{padding:14px 5px;border-top:1px solid #e0e0e0;display: flex;align-items: center;justify-content: center;} [class*="col_group_"] .figcaption > p{margin-top:0;color:#000;} [class*="col_group_"].col_group_4 .figcaption{/*height:76px;*/} .img_flex{display: flex;justify-content: center;gap:10px;} .box_1{border: 10px solid #FFF2E0;padding:2.5rem; margin:2rem 0;} .box_1 .title{color: #EF971A;font-size:1.2em;font-weight:700;letter-spacing: -0.44px;display: block;margin-bottom: 15px;} .box_1 li{color:#000; font-size:1.12em;font-weight: 500;} .box_1 li + li{margin-top:5px;} .box3{background: #F7F7F7;text-align: center;padding:25px 30px;} .box3 strong{font-size: 1.25em;font-weight: 500;color:#111;letter-spacing: -0.6px;} /* 상단 제목 행 */ .guide-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; } .guide-title{ font-size:1.25em; font-weight:500; margin:0; color:#000; letter-spacing: -1px; } /* 태그(라벨) */ .tag{ display:inline-block; padding:10px 15px; border:2px solid #FFCD83; border-radius:10px; font-size:1.25em; font-weight:700; line-height:1; white-space: nowrap; letter-spacing: -1px; } .tag-orange{ color:#C57600; } /* outline 색 = 글자색 */ .tag-green { color:#4b8700; border-color:#C2E85A;} .check-list + .guide-head{margin-top:2rem;} .check-list{ list-style:none; padding:0; } .check-list li{ position:relative; padding-left:30px; /* 아이콘 공간 */ margin-bottom:15px; } .check-list li strong{ display:block; font-size:1.25em; font-weight:700; margin-bottom:4px; letter-spacing: -1px; } .check-list li p{ margin:0 0 6px; color:#000; font-size:1em; font-weight: 500;letter-spacing: -1px;} .check-list li p small{color:#777777;font-size:0.9em;font-weight: 400;display: inline-block;line-height: 1.5;} /* 체크 아이콘 공통 */ .check-list li::before{ content:'\e92b'; /* 유니코드 ✔ */ position:absolute; left:0; top:1px; border-radius:50%; font-size:22px; text-align:center; font-family: 'xeicon'; } .check-list.orange li::before{ color:#c77d00; } .check-list.green li::before{ color:#4b8700; } /* TIP 말풍선 */ .tip{ display:inline-block; width:28px; line-height: 20px; background:#FFCD83; color:#804D00; font-size:11px; font-weight:700; border-radius:5px; vertical-align:middle; margin-right:4px; text-align: center; } /* 건조 단계 안내 문장 */ .note{ font-weight:700; margin:18px 0 10px; } .border_gray .tit01{font-size:1.4em;font-weight:700;letter-spacing: -0.44px;display: block;margin-bottom: 15px;color:#EF971A;text-align: center;margin-bottom: 1.6rem;} .profile_bln li{display: flex;align-items: center;} .profile_bln li + li{margin-top:1.6rem;} .profile_bln li:nth-child(even){flex-direction: row-reverse;} .profile_bln li > i{flex-shrink: 0;} .profile_bln li > div{ margin-left:1.8rem; width:100%; border-radius: 2rem; background: #785F40; color:#fff; padding:1.6rem 1.8rem; font-size: 1.13em; letter-spacing: -0.9px; line-height: 1.6; position: relative; /* 삼각형을 위한 기준 */ } /* 말풍선 삼각형(왼쪽) */ .profile_bln li > div::before { content: ""; position: absolute; left: -18px; /* 삼각형이 div 왼쪽에 붙도록 조정 */ top: 32px; /* 텍스트 중앙쯤에 위치하도록 조정 */ width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 18px solid #785F40; /* 배경색과 동일하게 */ top:50%; transform: translateY(-50%); } .profile_bln li:nth-child(even) > div{margin-right:1.8rem;margin-left:0;background: #554736;} .profile_bln li:nth-child(even) > div:before{ border-left: 18px solid #554736; border-right: 0; left:auto; right:-18px; } /* 그리드 레이아웃 */ .process{ display: grid; grid-template-columns: 10.625em 1fr 1fr; grid-auto-rows: auto; gap: 0.875em; align-items: start; margin-top:0.5rem; } /* 헤더 */ .col-head{ color: #fff; font-weight: 500; padding: 0.6em; border-radius: 0.5em; text-align: center; font-size: 1.125rem; } .head-preserve{ grid-column: 2/3; background: #2D9CC8; margin-right:0.7em; } .head-digitize{ grid-column: 3/4; background: #20B2C0; margin-left:0.7em; } /* 좌측 카테고리 라벨 */ .process .label{ background: #5F707D; color: #fff; border-radius: 0.5em; /* 14px */ padding: 1.125em 0.875em; /* 18px 14px */ font-weight: 500; display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; font-size: 1.125rem; } /* 내용 카드 */ .process .card{ background: #fff; border-radius: 0.5em; /* 12px */ padding: 1em 1.125em; /* 16px 18px */ position: relative; /* 64px */ border:2px solid #DFDFDF; text-align: center; letter-spacing: -1px; font-size: 1.125rem; height: 100%; display: flex; align-items: center; justify-content: center; min-height: 6.4em; margin-left:0.7em; } .process .card.arrow-to-right{ margin-right: 0.7em; margin-left:0; } .process .card p{ margin: 0; } .process .card p + p{ margin-top: 0.375em; } /* 6px */ .process .card .muted{ color: #6b7683; font-weight: 500; } /* 가운데 → 오른쪽 화살표 */ .process .card.arrow-to-right::before{ content: ""; position: absolute; top: 50%; right:-2em; transform: translateY(-50%); background:url('../../images/contents/arrow.png') no-repeat center center / 100%; width:27px; height: 35px; } .border_gray:has(.diagram_table){ overflow-x:auto; } .diagram_table { display: flex; gap:3em; min-width: 902px; } .diagram_table .cont_table:last-child{ width:33.4%; flex-shrink: 0; } .diagram_table .cont_table:last-child td, .diagram_table .cont_table:last-child th{} .diagram_table .cont_table:first-child .colspan{ background: #216B96; } .diagram_table .cont_table:last-child .colspan{ background: #068A97; } .diagram_table .cont_table:first-child th{ background: #358CBF; } .diagram_table .cont_table:last-child th{ background: #20B2C0; } .diagram_table .cont_table img{ margin-bottom: .5em; } .diagram_table .cont_table th{ padding:0.7rem; line-height: 1.5; border-left:1px solid #6FACD0; color:#fff; border-bottom:0; } .diagram_table .cont_table td p:last-child{ min-height:2.9em; display:flex; align-items: center; justify-content: center; } .diagram_table .cont_table table{margin-left:0;width:100%;} .diagram_table .cont_table{ margin-top:0; margin-bottom: 0; position: relative; overflow:visible } .diagram_table .cont_table td:last-child{ border-right:1px solid #ddd; } .diagram_table .cont_table .height{ height: 4.25em; } .diagram_table .cont_table + .cont_table:before{ content:''; background:url('../../images/contents/arrow.png') no-repeat center center / 100%; width:27px; height: 35px; position: absolute; top:50%; left:-2.4em; transform: translateY(-50%); } /* 기능 - AI 본문요약, 공유, 프린트 */ .seriesPlan_wrap .function_wrap, .timemachine_wrap .function_wrap, .news_wrap .function_wrap, .sympathy_wrap .function_wrap, .newsbrief_wrap .function_wrap, .foreign_wrap .function_wrap{top:12px} .function_wrap{position:absolute;right:0;top:2px} .cont-style{position:relative} .cont-style + .cont-style .function_wrap{top:77px} .btn_fc{position:relative;display:inline-block;width:40px;height:40px;border:1px solid #aaa;text-align:center;border-radius:6px;background:#fff;vertical-align:top;transition:all .3s;z-index:1} .btn_fc:hover{background:#f9f9f9;transform:translateY(-2px);box-shadow:-3px 3px 3px rgba(0,0,0,.05)} .btn_fc::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:22px;height:22px;background-repeat:no-repeat;background-position:center} .btn_fc.share::before{background-image:url(../../images/contents/icon_share.svg)} .btn_fc.share.active::before{width:28px;height:28px;background-image:url(../../images/contents/icon_share_close.svg);background-size:contain} .btn_fc.print::before{background-image:url(../../images/contents/icon_print.svg)} .share_lst{display:none;position:absolute;top:calc(100% - 4px);left:0;width:100%;padding:14px 0 10px;border-width:0 1px 1px;border-style:solid;border-color:#ddd;border-radius:0 0 6px 6px;background:#fff;text-align:center;box-shadow:0 0 4px rgba(0,0,0,.15)} .share_lst li + li{margin-top:6px} .share_lst li a{display:block;height:30px} .share_lst li .fb{background:url(../../images/main/tside_2.png) center no-repeat;background-size:28px auto} .share_lst li .insta{background:url(../../images/main/tside_3.png) center no-repeat;background-size:28px auto} .modal{display:none;padding:2rem;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);text-align:center;z-index:3} .modal::before{content:"";display:inline-block;height:100%;margin-right:-4px;vertical-align:middle} .modal .modal_box{display:inline-flex;flex-direction:column;;position:relative;width:100%;max-height:100%;max-width:950px;background:#fff;border-radius:6px;overflow:hidden;text-align:left;vertical-align:middle} .modal .modal_head{padding:2rem 3.2rem;background:#003863} .modal .modal_head .tit{position:relative;color:#fff;font-size:2.2rem;font-weight:700;letter-spacing:-0.022rem;} .modal .modal_head .ai_tit{padding-left:4.2rem;min-height:3.2rem} .modal .modal_head .ai_tit::before{content:"";position:absolute;left:0;top:-0.3rem;width:3.2rem;height:3.2rem;border-radius:3px;border:1px solid #fff; background:url(../../images/contents/re_img03.svg) no-repeat center center / 120% auto;} .modal .modal_body{max-height:calc(100% - 6.9rem);padding:3.2rem 3.2rem 4rem;overflow-y:auto;line-height:1.6;color:#353535;font-size:1.7rem;font-weight:500;letter-spacing:-0.017rem;} .modal .modal_close{position:absolute;right:2.4rem;top:1.8rem;width:3.2rem;height:3.2rem;background:url(../../images/contents/icon_modal_close.svg) no-repeat center center / 60% auto;transition:transform .3s} .modal .modal_close:hover{transform:rotate(180deg)} .ai_summary{ line-height: 1.5;} .ai_summary p:not(:first-child){ margin-top: 1rem;} @media print{ @page { size:A4 portrait; } body, body * {font-size: 14px !important;} .tit_wrap strong{ font-size: 20px !important;} .tit_wrap strong br{ display: none;} img{ max-width: 70% !important;} #header, #footer, .seriesPlan_wrap >div:not(.subcont), .tit_wrap .function_lst, #btntop, .q_link, .photo_mb{display: none;} #wrap, .cont-style{padding: 0 !important; border: 0 !important;} .cont-style >div{display: none;} .cont-style >div.print-target{display: block;} .tit_wrap{margin-bottom: 3rem;} } @media all and (max-width:768px){ .btn_fc.print{display:none} } /*Responsive**********/ @media screen and (max-width:1920px){ .q_link{padding-right: calc((1088px + 6rem) + ((100% - (1088px + 6rem)) / 2) + 2rem);} } @media screen and (max-width:1600px){ .q_link{display: none;} } @media screen and (max-width:1200px){ #wrap #content.container #detail_content .tits{padding-top: 1.4rem; font-size: 3.6rem;} #main_01{padding: 6rem 0 8rem;} #main_01 .in{gap: 4rem;} #main_01 .in .l .imgs{margin-top: 2.4rem;} #main_01 .in .l .desc{gap: 2.4rem; margin-top: 2.6rem;} #main_01 .in .l .desc span strong{margin-top: 1.2rem; font-size: 3.2rem;} #main_01 .in .r{width: 40rem;} #main_01 .in .r .swiper{height: 40rem; margin-top: 2.2rem;} #main_01 .in .r .swiper .swiper-wrapper .swiper-slide{gap: 2rem;} #main_02{padding: 7rem 0;} #main_02 .tits a{width: 4.5rem; height: 4.5rem;} #main_02 .in{margin-top: 2.6rem;} #main_02 .in .list >li >.question{padding: 2.2rem 5rem; font-size: 1.9rem;} #main_02 .in .list >li >.question:before{top: 2rem; width: 2.8rem; height: 2.8rem;} #main_02 .in .list >li >.question span{top: 2.4rem;} #main_02 .in .list >li >.answer{padding: 2.8rem;} #main_03{margin-top: 9rem;} #main_03 .in{gap: 4rem;} #main_04{margin-top: 9rem;} #main_04 .in{gap: 4rem;} #main_05{margin-top: 9rem; padding: 6.5rem 0;} #main_05 .in ul{gap: 1rem 4rem;} .thumb figure .photo_modal .in .p_wrap{gap: 1.5rem;} .thumb figure .photo_modal .in .p_wrap .prev, .thumb figure .photo_modal .in .p_wrap .next{width: 6rem; height: 6rem;} } @media screen and (max-width:1024px){ #wrap.main{padding-top: 7rem;} #wrap #content.container #detail_content .tits{font-size: 3.2rem;} #main_01{padding: 4rem 0 6rem;} #main_01 .in{gap: 3rem;} #main_01 .in .l .titss{font-size: 3.2rem; gap: 1.4rem;} #main_01 .in .l .imgs{margin-top: 2rem;} #main_01 .in .l .desc{margin-top: 2.2rem;} #main_01 .in .l .desc span em{font-size: 1.8rem;} #main_01 .in .l .desc span strong{margin-top: 1rem; font-size: 2.9rem;} #main_01 .in .r .swiper .swiper-wrapper .swiper-slide{padding: 1.8rem 0 1.8rem 1rem;} #main_01 .in .r{width: 38rem;} #main_01 .in .r .swiper{height: 38rem; margin-top: 2rem;} #main_01 .in .r .t_wrap .ctrl a{width: 4rem; height: 4rem;} #main_02{padding: 6rem 0;} #main_02 .tits a{width: 4rem; height: 4rem;} #main_02 .in .list >li >.question{padding: 2rem 4.5rem; font-size: 1.8rem;} #main_02 .in .list >li >.question:before{top: 1.8rem; width: 2.6rem; height: 2.6rem; font-size: 1.5rem;} #main_02 .in .list >li >.question span{top: 2rem;} #main_02 .in .list >li >.answer{padding: 2.25rem 2rem;} #main_02 .in .list >li >.answer .arrow{margin-top: 2rem;} #main_02 .in .list >li >.answer .arrow a{padding: 1.1rem 1.2rem; font-size: 1.5rem;} #main_03{margin-top: 6rem;} #main_03 .in{display: block; } #main_03 .in .tits{} #main_03 .in ul{margin-top: 3rem;} #main_03 .in ul >li >a{min-height: 7rem; padding: 1.4rem 5.5rem 1.4rem 2rem;} #main_03 .in ul >li >a:before{top: 2rem; right: 2rem; width: 2.8rem; height: 2.8rem;} #main_04{margin-top: 6rem;} #main_04 .in{display: block; } #main_04 .in .tits{} #main_04 .in ul{margin-top: 3rem; gap: 1.4rem;} #main_04 .in ul li{width: calc((100% - 1.4rem - 1.4rem) / 3);} #main_04 .in ul li a:before{width: 2.8rem; height: 2.8rem;} #main_04 .in ul li a strong{padding: 2rem 1.6rem; font-size: 1.9rem;} #main_05{margin-top: 6rem; padding: 5.5rem 0;} #main_05 .in .titss{font-size: 2.8rem;} #main_05 .in ul{gap: 1rem 3rem;} #main_05 .in ul li a img{width: 3rem;} .tit_wrap{margin-bottom: 4rem;} .tit_wrap strong{gap: 0.8rem; font-size: 3.4rem;} .tit_wrap strong em{font-size: 1.6rem;} .thumb figure .photo_modal .in{align-content: center; gap: 4rem 0; padding: 6.3vh 1rem 5.2vh;} .thumb figure .photo_modal .in .p_wrap{gap: .5rem;} .thumb figure .photo_modal .in .p_wrap .prev, .thumb figure .photo_modal .in .p_wrap .next{width: 5rem; height: 5rem;} .thumb figure .photo_modal .in .p_wrap .swiper-button-lock + .swiper{margin: 0 1rem;} .thumb figure .photo_modal .in .p_wrap .swiper .swiper-wrapper .swiper-slide{gap: 3rem;} .thumb figure .photo_modal .in .p_wrap .swiper .swiper-wrapper .swiper-slide img{height: auto; max-height: 80vh;} .modal .modal_head{padding: 1.8rem 2rem;} .modal .modal_close{right: 2rem;} .modal .modal_body{padding: 2.6rem 2rem 3rem;} .ai_summary p:not(:first-child){ margin-top: 0.8rem;} #main_04 .in .tits, #main_03 .in .tits{ width: auto;} .summary-wrap{ align-items: baseline;} .summary-wrap.flex-column{ flex-direction: row !important;} .summary-wrap .summary br{ display: none;} } @media(max-width:1000px){ /* #header{padding:0;} #header .head_wrap{padding:0;max-width: 93%;} #content.container #detail_content{max-width:93%;} #footer .footerwrap{padding-left:15px !important;padding-right:15px !important} */ #mcnts1 > .mcnts_inner_wrap{padding-top:82px} #mcnts1 .h2_desc{position:relative;top:auto;right:auto;width:100%;height:auto;margin:0 0 30px;background:none;font-size:1.438em;line-height:1.4347em;color:#fff;letter-spacing:-0.03261em} #mcnts1 .desc{padding-right:0;padding-left:20px} #mcnts3 .compass_lst a > .caption{padding:20px} #mcnts3 .compass_lst a > .caption > .title{margin-top:5px} .txt-figure > p{padding:15% 5%;} #mcnts3 .compass_lst a > .caption > .title br {display:none} .head_wrap .lst{display:none;} #mcnts2 .news_lst a > .caption:before{display:none;} #mcnts2 .news_lst a > .caption br{display:none;} .img-style li{position:static !important;top:inherit !important;right:inherit !important;left:inherit !important;transform:none !important;text-align:center;} .img-style .txt{width:100% !important;} .img-style li + li{margin-top:15px;} .img-style.img-style2{margin-top:0;} .img-style.img-style2 .txt .txtp{width:auto;} .depth1{padding:0;height:auto;} .depth1:before{display:none;} .bgbox:before{display:none;} .three-thumb > li{width:100%;} .thumb .figure{text-align:center;} .thumb.thumb_fig .figcaption > p{bottom:0;width:100%;} .depth br{display:none;} .thumb_wrap > li{min-width:auto;} .circle_list.inline{display: block;} .circle_list.inline > li{width:100%;} #mcnts3 .compass_lst li .text > strong{word-break: break-all;} .thumb_wrap li[class*="auto"]{width:50%;} /* 24-03-20 sns 방문 */ .visite {width: calc(100% - 1.8rem);margin:3rem auto;padding: 10px 1.4rem;} .visite h3 {float:none;} .visite h3::after {content:"";display:block;position:absolute;right:0;bottom:-2rem;width:8.9rem;height:7.6rem;background:url("../../images/main/visite_icon.png") no-repeat 50% 50% / 100%;} .visite .tside_menu {float: none;width:100%;margin-top:2rem;text-align: center;} .visite .tside_menu > li {float: none;display:inline-block;} .banner_list.item4 li a{font-size:1rem} .banner_list.item4 li a i img{height:65px} .circle_lst{display: block;} .circle_lst > li{width:100%;height: auto;border-radius:10px;padding:1rem;} .circle_lst > li + li{margin-top:1rem;} .banner_list.item4 li a{padding:0.8rem 1.3rem 0;} .restore_box .list{display: block;text-align: center;} .restore_box .list li + li{margin-top:2rem;} #mcnts2{padding:2rem 1rem;} .visual_wrap .visual_txt{padding:2rem 1rem 0;gap:1rem;} .visual_wrap h3 > a br{display: none;} .circle_box{flex-direction: column;} .circle_box > li{height:auto;width:100%;border-radius:1rem;padding:1rem;} .circle_box > li strong{padding:0;} .circle_box > li * br{display: none;} #mcnts3 > .mcnts_inner_wrap{padding:65px 40px 70px;} .border_gray .immg{position:static;margin-bottom: 1.4rem;} .banner_list li a{font-size:1.1em;} .banner_list.t3{display: block;} } @media screen and (max-width:840px){ #main_01 .in .r{width: 100%;} #main_01 .in .r .swiper{height: 40rem;} #main_01 .in .r .swiper .swiper-wrapper .swiper-slide .imgs{width: 17rem; padding-top: 10rem;} #main_01 .in .r .swiper .swiper-wrapper .swiper-slide strong{} } @media(max-width:788px){ #mcnts2 .news_lst{gap:1rem;} #mcnts2 .news_lst > li{padding:0;} #mcnts2 .news_lst a > img{width:100%} #mcnts2 .news_lst a > .caption{text-align:center;margin-top:10px;} .visual_wrap{background-size:cover} .visual_wrap h3 .small{margin-top:10px;font-size:0.556em;line-height:1.5333em} .visual_wrap h3:after{display:none} .visual_wrap h3 > a{font-size:28px;} #mcnts1{background-size:auto 220px} #mcnts1 > .mcnts_inner_wrap {padding-top:26px;padding-bottom:30px} #mcnts1 .h2_desc{display:none;} /*#mcnts1 .h2_desc{margin-bottom:10px;font-size:1.077em;line-height:1.7142em}*/ #mcnts1 h3{width:100%;padding-bottom:0;font-size:2.077em;line-height:1.3703em} #mcnts1 h3 .small{margin-top:10px;font-size:0.556em;line-height:1.5333em} #mcnts1 h3:after{display:none} #mcnts1 .desc{display:none} #mcnts2 .notice_link > li{min-height: 101px;background-size:auto 96px;/*background-position: 60% 100%;*/} #mcnts2 .notice_link a{padding:25px;font-size:1.385em;line-height:1.1111em} #mcnts2 .notice_link a > .link{width:80px;padding:0 10px;margin-top:5px;font-size:0.778em;line-height:1.2857em;float:right;} #mcnts3{padding:25px 0} #mcnts3 h3{font-size:1.846em} #mcnts3 .compass_lst li .text > span{font-size:1rem;} #mcnts3 .compass_lst a > .caption{padding:10px 14px} #mcnts3 .compass_lst a > .caption > .category{font-size:1.077em;line-height:1.42857em} #mcnts3 .compass_lst a > .caption > .title{font-size:1.385em;line-height:1.1111em} #mcnts3 .compass_lst a > .caption > .title br{display:none;} #mcnts4 h3{font-size:1.846em} #mcnts4 .foreignNews_lst{margin-bottom:30px} #mcnts4 .foreignNews_lst > li + li{margin-top:5px} #mcnts4 .foreignNews_lst a{height:50px;padding:15px 25px 15px 110px} #mcnts4 .foreignNews_lst a > .num{width:100px;height:50px;padding:15px 0;font-size:1.077em;line-height:1.42857em} #mcnts4 .foreignNews_lst a > .title{font-size:1.385em;line-height:1.1111em} #mcnts4 .foreignNews_lst a > .title .chinese{line-height:1.1111em} #mcnts4 .record_lst a > .img{max-width:250px} .depth{font-size:2.8rem; line-height: 1.3;} .subvisual_wrap .category strong{padding: 0.6rem 1.8rem; font-size: 1.6rem;} .subvisual_wrap .h1_desc{font-size:1.231em;line-height:1.25em;letter-spacing:-0.08em;} .txt-figure > p{padding:5%; font-size:0.750em;} /*77호*/ .brief_title .low-figcaption{width:100%;} .responsive-figure{display:block;} .responsive-figure-none{display:none;} .brief_title.news1-2 .ft_right{float:inherit;} .float-brief-title .thumb, .float-brief-title .figcaption{width:100%;} .float-brief-title .thumb + .figcaption{margin-top:25px;} .table-half{display:table; width:100%;} .table-half-head-none{margin-top:0;} .table-half-head-none thead{display:none;} .bul-list07 > li:after{top:1.5px;} .brief_title figure img, #newsbreak2 figure img{width:100%;} .visual_wrap div.img > span{right:15px;top:30px;width:218px;height:151px;} .img-style.img-style2 .txt, .img-style.img-style1 .txt{padding:15px;} .thumb.play_link > a {position:static;top:inherit;right:inherit;width:100%;height:auto;padding:1rem;transform:none;display:block;} .thumb.play_link > a .title{position:static;top:inherit;left:inherit;transform:none;} .thumb.solid_bg2{padding:0;} .styletxt{padding:0 !important;} .styletxt:before{display:none !important;} .styletxt{background:none !important;} .bgbox{padding:1rem 0;} #mcnts3 .compass_lst li .text > span br{display:none;} .visual_wrap .visual_txt .img, .visual_wrap .visual_txt img{height:100%;} #mcnts3 .compass_lst li.lst1 .text > strong{min-height:auto;} #mcnts3 .compass_lst li.lst4{height:175px;} .restore_box2 li{flex-direction: column;gap:0;} .restore_box2 li .img{text-align: center;width:100%;} .restore_box2 li .img img{width:100%;} .restore_box3 .thumb_wrap:first-of-type .txt, .restore_box3 .thumb_wrap:last-of-type .txt{min-height:auto;} .banner_list li{width:100%;} .banner_list li a{padding:1.3rem 7rem 2.5rem 1.5rem;} .banner_list.t4 li a{padding:1.3rem;height:7.8rem;} .banner_list li a br{display: none;} .banner_list li a i{bottom:0;right:1rem;} .border_gray{padding:1em;border-width: 5px;} .border_gray:has(.posi_tit){padding:2em 1em 1em;} .sub02 .step_list{gap:15px 30px;flex-wrap: wrap;overflow: hidden;} .sub02 .step_list > li:after{margin-left:0;} /*[class*="col_group_"]{flex-direction: column; align-items: center;}*/ [class*="col_group_"] .figcaption > p br{display: none;} [class*="col_group_"] .figure{ border-left: none; border-bottom: none;} [class*="col_group_"] li:last-child{ border-right: none;} [class*="col_group_"]{ flex-wrap: wrap; gap: 12px;} [class*="col_group_"] li{ flex: 0 1 48%;} .sub03 .step_list{flex-direction: column;} .sub03 .step_list > li:after{right:auto;left:50%;transform: translateX(-50%) rotate(90deg);top:100%;} .bul1[class*="type"] li:before{top:12px;} #mcnts2 .news_lst a > .caption:after{display: none;} .img-complex.d-flex{ flex-wrap: wrap;} } @media(max-width:750px){ /* .visual_wrap{background:url(../images/main/visual_bg_m.jpg) no-repeat 65% 0; background-size:cover;} */ #mcnts3 .compass_lst li.full a > .img img{width:100%;} #mcnts3 .compass_lst li.lst4{height:auto;} #mcnts3 .compass_lst > li > a{display:block;} #mcnts3 .compass_lst a > .img{width:40%} #mcnts3 .compass_lst a > .caption{width:60%;padding:20px 15px} #mcnts3 .compass_lst1 a > .caption, #mcnts3 .compass_lst1 a > .img{width:100%;} #mcnts3 .compass_lst > li.full .img{width:40%} #mcnts3 > .mcnts_inner_wrap{padding:40px 30px;} .step_wrap li{width:100%;float:none;padding-right:0;} .step_wrap{width:100%;} .step_wrap li:before{display:none;} .step_wrap li.beforel{margin-left:0;} .garden-lst li{width:100%;float:none;padding-right:0;} .garden-lst{width:100%;} .img25 li{width:50%;} #mcnts3 .compass_lst li .btn_01{position:static;bottom:inherit;left:inherit;font-size:0.9rem;} .flag{grid-template-columns: repeat(2, 1fr);} .box_1{padding:1.5rem;} } @media(max-width:670px){ .visual_wrap .visual_txt{padding:30px 15px;} .subcont .cont-style + .cont-style{padding-top:30px;} .subcont .cont-style{padding-bottom:30px;} .w25 > li{width:50%;} .visual_wrap .visual_txt{display:block;height:auto;text-align:center;} .visual_wrap h3{margin-bottom: 0;} .visual_wrap .visual_txt .btn{margin:1rem auto;height:38px;line-height:38px;} .visual_wrap .h2_desc{padding-bottom:4px;} #mcnts4 .record_lst a > .caption{margin-top:1rem;word-break:break-all;} #mcnts4 .record_lst a > .caption > .title > i{font-size:.9rem;} .banner_list.item4{flex-direction:inherit} .banner_list.item4 li{width:100%} .thumb.thumb_fig .figcaption > p br{display:none;} .thumb.thumb_fig .figcaption > p{padding:.7rem .5rem;} #mcnts4 .record_lst > li{width:100%;margin-bottom:2rem;} #mcnts4 .record_lst > li:last-child{margin-bottom: 0;} #mcnts4 .record_lst a > .caption > .desc{font-size:1.2rem;} #mcnts4 .record_lst a > .caption > .title{font-size:1.4rem;} .banner_list.item4 li a br{display: none;} .banner_list{display: block;} .banner_list li + li{margin-top:1rem;} .banner_list.t2 li + li{margin-top:0;} #mcnts3 .compass_lst{gap:2rem;flex-direction: column;} #mcnts3 .compass_lst li{width:100%;} .posi_tit{white-space: inherit;width:90%;padding:7px 15px;line-height: 1.3;} .step_list > li{flex:100%;} .step_list > li div{ min-height: auto; } .step_list > li div ul{margin-bottom: 16px;} .guide-head{flex-direction: column;align-items: flex-start;gap:6px;} .profile_bln li{flex-direction: column !important;} .profile_bln li > div{margin:1.8rem 0 0!important;padding:1rem 1.3rem; border-radius:1rem;} .profile_bln li > div::before{left:50%; transform: translateX(-50%) rotate(90deg); top:-19px;} .profile_bln li:nth-child(even) > div:before{right:auto;left:50%;transform:translateX(-50%) rotate(-90deg);} .visual_wrap h3 > a{font-size:26px;} .visual_wrap .h2_desc span{color:#333;display:none;} .visual_wrap h3 > a span{line-height:inherit;} #mcnts1{background-size:auto 160px} #mcnts1 h3{font-size:25px;} #mcnts1 .h2_desc{display:none;} #mcnts2 .notice_link a{padding:24px 15px !important;font-size:1em;} #mcnts2 .notice_link a > br{display:none} #mcnts2 .notice_link > .no1 i{width:25px;height:25px;} .newsbreak_wrap .brief_title .newsbreak_num{font-size:1.4em;letter-spacing: -0.05em;} .newsbreak_wrap .brief_title .newsbreak_num span{display:block;width:100%;margin:0 0 10px;padding:5px;line-height:inherit;height:auto;} .newsbreak_wrap.newsbreak1 .brief_title .txt_box06{top:auto;width:100%;padding:50px;} .newsbreak_wrap .brief_title .newsbreak_num strong{width:100%;display:block;} .newsbreak_wrap.newsbreak1 .brief_title .txt_box06 p{word-break:inherit;} .txt-figure > p{padding:15% 10%; font-size:inherit;} .table-img tbody td{padding:10px !important;} #mcnts4 .record_lst a > .caption > .title br {display:block} .box-wrap1{padding:1rem !important;} .box-wrap1 > .tit{position:static;top:inherit;left:inherit;transform:none;padding:0;display:flex;background:none;font-size:20px;margin-bottom:1.5rem;align-items:center;} .depth br{display:none;} #mcnts2 .news_lst{flex-direction: column;gap:2rem;} .news_lst .slick-arrow{top:42%;padding:0;} .news_lst .slick-arrow.slick-prev{z-index:1;} .news_lst .slick-arrow > i{text-align:center;} .thumb.play_link{padding:15px;} .visual_wrap div.img > span{display:none;} #mcnts4 .record_lst a > .caption > .title:before{display:none;} .box-wrap1 > .tit > span{display:block;line-height:1.2;} figure img{width:100%;} .thumb.thumb_fig .figcaption > p{width:100%;min-height:auto;white-space:inherit;} .mgt50{margin-top:30px !important;} .bbox{padding:6px;} .bbox>.inner{padding:1rem;} #mcnts4 .record_lst{width:calc(100% + 1rem);margin-left:-.5rem;padding-top:0;padding:0 55px;} .mcnts_inner_wrap h3 span:before{top:-2px;} .box_wrap{padding:1.5rem 1rem;} .box_wrap .tt{font-size:1.2rem;} .box_wrap .bul1 > li > p{padding-left:.9rem;} .border_box .point1{font-size:0.9em;} /* 24-03-20 sns 방문 */ .visite h3 {padding-right: 5.6rem;} .visite h3::after {width:5.6rem;} .restore_box li{flex-direction: column;} .restore_box li .tit{width:auto;display: block;text-align: center;padding:0.5rem;margin-bottom:.5rem;} .restore_box li > span{display: block;width:100%;} .restore_box li+li{margin-top:0.6rem;} .restore_box li .tit::before{left:50%;right:auto;transform: translateX(-50%) rotate(45deg);top:1.8rem;z-index: -1;} .restore_box .title{padding:0.6rem 0.3rem;font-size:1rem;} .tit_1{font-size:1.2rem;} .visual_wrap .visual_txt .img, .visual_wrap .visual_txt img{width:100%;} .visual_wrap h3{margin:1rem 0 0;} .posi_tit{width:100%;} .border_gray .bul1[class*="type"] li > em{width:100%;} .border_gray .bul1[class*="type"] li > p, .border_gray .bul1[class*="type"] li > div{line-height:1.4;width:100%;} .border_gray.mob{padding:0;border:0;} .banner_list li a i{opacity:0.3;} #mcnts4 .record_lst a > .img{max-width: inherit;width:100%;height:100%;} .banner_list li a{height: auto;padding:1.5em 1em;} .banner_list li a:after{position:static;display:block;margin-top: 1.5em;} .banner_list.t3 li a i{bottom:0.8rem;} .process{ grid-template-columns: 1fr; } .head-preserve, .head-digitize{ grid-column: 1/2; margin-right:0; margin-left:0;} .process .label{ min-height: auto; } .process .card.arrow-to-right::after, .process .card.arrow-to-right::before{ display: none; } .process .card{margin-left:0;} .banner_list.t4{display: block;} .banner_list.t4 li a{height: auto;} .cont-style + .cont-style .function_wrap{ top: 30px;} } @media screen and (max-width:640px){ #wrap #content.container #detail_content .tits{font-size: 2.8rem;} #main_01{padding: 3rem 0 5rem;} #main_01 .in .l .titss{font-size: 3rem; gap: 1.2rem;} #main_01 .in .l .imgs{margin-top: 1.6rem;} #main_01 .in .l .desc{gap: 2rem;} #main_01 .in .r .t_wrap .ctrl a{width: 3.6rem; height: 3.6rem;} #main_01 .in .r .swiper{height: 36rem; margin-top: 1.4rem;} #main_01 .in .r .swiper .swiper-wrapper .swiper-slide .imgs{width: 15rem; padding-top: 9rem;} #main_02{padding: 5rem 0;} #main_02 .tits a{width: 3.75rem; height: 3.75rem;} #main_03{margin-top: 5rem;} #main_03 .in ul{margin-top: 2rem;} #main_03 .in ul >li{width: 100%;} #main_03 .in ul >li >a{min-height: 6rem; padding: 1.4rem 4rem 1.4rem 1.5rem;} #main_03 .in ul >li >a:before{top: 1.6rem; right: 1.5rem; width: 2.6rem; height: 2.6rem;} #main_04{margin-top: 5rem;} #main_04 .in ul{gap: 1rem; margin-top: 2rem;} #main_04 .in ul li a strong{padding: 1.5rem;} #main_04 .in ul li a:before{right: 1.5rem; width: 2.6rem; height: 2.6rem;} #main_05{margin-top: 5rem; padding: 4rem 0;} #main_05 .in .titss{font-size: 2.6rem;} #main_05 .in{gap: 1.4rem 4rem;} #main_05 .in ul{gap: 0.8rem 2rem;} #main_05 .in ul li a img{width: 2.6rem;} .tit_wrap{display: block; margin-bottom: 3rem;} .tit_wrap strong{gap: 0.8rem; font-size: 2.8rem;} .tit_wrap strong em{padding: 0.6rem 1.8rem;} .function_lst{flex-direction: row; justify-content: flex-end; align-items: center; width: 100%; margin-top: 1.4rem;} .subscribe_frm .basic_table{display: block; padding-bottom: 0.4rem;} .subscribe_frm .basic_table tbody{display: block;} .subscribe_frm .basic_table tbody tr{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 0.6rem 0} .subscribe_frm .basic_table tbody tr th{display: block; width: 10rem; height: auto;padding-bottom: 0;} .subscribe_frm .basic_table tbody tr td{display: block; width: calc(100% - 10rem); height: auto; padding-bottom: 0;} .thumb figure .photo_modal .in .p_wrap .prev, .thumb figure .photo_modal .in .p_wrap .next{width: 4rem; height: 4rem; background-size: 120% auto;} .modal .modal_body{padding: 2.2rem 2rem 2.6rem;} } @media(max-width:580px){ .thumb_wrap{flex-direction: column !important;} #mcnts2 .news_lst{padding:0 3rem;} } @media screen and (max-width:480px){ #main_01 .in .l .desc{display: block;} #main_01 .in .l .desc span{display: block; width: 100%;} #main_01 .in .l .desc span strong{font-size: 2.6rem;} #main_01 .in .l .desc a{display: inline-block; margin-top: 1.6rem;} #main_04 .in ul{flex-wrap: wrap;} #main_04 .in ul li{width: 100%;} #main_04 .in ul li a{padding-top: 9rem;} #main_04 .in ul li a strong{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; height: 100%; padding: 1rem 5rem 1rem 1.5rem;} #main_04 .in ul li a:before{top: 50%; right: 1.5rem; transform: translateY(-50%);} .subscribe_frm .basic_table tbody tr{gap: 0.4rem 0;} .subscribe_frm .basic_table tbody tr th{width: 100%; margin-top: 0.4rem;} .subscribe_frm .basic_table tbody tr th:first-child{margin-top: 0;} .subscribe_frm .basic_table tbody tr td{width: 100%;} .subscribe_frm .basic_table tbody tr td input{padding: 0;} } @media screen and (max-width:420px){ #main_01 .in .r .swiper{height: 32rem;} #main_01 .in .r .swiper .swiper-wrapper .swiper-slide .imgs{width: 13rem; padding-top: 8rem;} } @media(max-width:360px){ .visual_wrap {background-position:37% 0} #mcnts2 .notice_link > li{width:100%} #mcnts2 .notice_link > li + li{margin-top:5px} #mcnts2 .notice_link a{padding:10px 15px} #mcnts3 .compass_lst a > .caption{padding:9px 15px} .basic_table colgroup col:nth-child(1){width:7%;} .basic_table colgroup col:nth-child(2){width:30%;} .basic_table colgroup col:nth-child(3){width:20%;} .basic_table colgroup col:nth-child(4){width:43%;} .basic_table th{font-size:1em;} .txt-figure > p{padding:5%;} .subvisual_wrap h1 {font-size:2.6rem;;} .visual_wrap h3 br{display:none;} .w25 > li{width:100%;float:none;margin-bottom:15px;} .banner_list li a br{display: none;} #mcnts3 .compass_lst li .text > strong br{display: none;} } @media(max-width:320px){ .visual_wrap h3 > a{font-size:20px;} #mcnts3 .compass_lst a > .img{overflow:hidden} #mcnts3 .compass_lst a > .img > img{width:130px;height:103px} #mcnts3 .compass_lst1 a > .caption {width: 100%;} #mcnts3 .compass_lst1 a > .img > img {width: 100%;} } .whiteBg_photo { position: relative; } .whiteBg_photo .img_desc { position: absolute; bottom: 0; padding: 5px 20px; background-color: #fff; color: #000; } .color_box { margin-top: 20px; padding: 30px; border: 8px solid #d9eef4; text-align: justify; } .color_box dt { margin-bottom: 10px; color: #1aa9aa; font-weight: bold; } .color_box dd + dt { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e6e5e5; } .greeting { margin-top:40px; padding:60px 35px; background:url(../images/contents/greeting_bg.gif) repeat 0 0; border:1px solid #ebe0b7; font-family: 'Noto Serif', serif; font-size:1.063em; color:#555; } .greeting .tit { margin-bottom:40px; color: #fc6f4e; text-align: center; line-height: 1.3; font-size: 2.25em; font-weight: 700; } .greeting .name { color:#a08e4d; text-align:right; font-weight: bold; } .greeting .li_th1{margin-top:35px;} .greeting .li_th1 > li:after{width:9px; height:9px; top:10px; border-radius:50%;} .greeting .li_th1 > li{padding-left:23px;} /* 2018 */ .center{text-align:center !important;} #footer .guide > a {color: #fc6f4e;} /* 매체별 처리 과정 플로우차트 스타일 */ .process_flow { margin: 20px 0; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; } .flow_header { display: flex; background: #216B96; color: white; } .flow_title { flex: 1; padding: 15px 10px; text-align: center; font-weight: bold; font-size: 14px; border-right: 1px solid #64AEDA; } .flow_title:first-child { flex: 0 0 120px; /* 매체유형 컬럼은 고정 너비 */ } .flow_title:last-child { border-right: none; } .flow_row { display: flex; border-bottom: 1px solid #ddd; } .flow_row:last-child { border-bottom: none; } .media_type { width: 120px; background: #4a4a4a; color: white; padding: 20px 10px; text-align: center; font-weight: bold; font-size: 13px; display: flex; align-items: center; justify-content: center; } .process_step { flex: 1; padding: 20px 15px; background: white; border-right: 1px solid #ddd; font-size: 13px; line-height: 1.5; display: flex; align-items: center; } .process_step:last-child { border-right: none; } /* 모바일 반응형 */ @media (max-width: 768px) { .flow_header { flex-direction: column; } .flow_title { border-right: none; border-bottom: 1px solid #64AEDA; } .flow_title:last-child { border-bottom: none; } .flow_row { flex-direction: column; } .media_type { width: 100%; border-bottom: 1px solid #ddd; } .process_step { border-right: none; border-bottom: 1px solid #ddd; } .process_step:last-child { border-bottom: none; } } .brief_history>div:first-child{ flex: 0 1 400px;} .brief_history>div:last-child{ flex: 1;} @media (max-width: 1000px) { .brief_history>div:first-child{ flex: 1;} } .announcements .bul-type-hipen{ margin-left: 30px;} @media (max-width: 767px) { .announcements > li{ flex-direction: column !important; align-items: flex-start !important;} .announcements > li a{ margin-left: 33px; margin-top: 5px;} .d-flex-mob.d-flex{ flex-direction: column !important;} .d-flex-box > div:not(:first-child) { margin-top: 20px !important;} .d-flex-mob .border_gray:has(.posi_tit):not(:first-child) {margin-top: 20px; } } .ver-top td{ vertical-align: top;}