@charset "utf-8"; 

.story * {box-sizing:border-box; margin:0; padding:0; color:#000; font-style:normal; font-family:"Pretendard", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", sans-serif, "돋움", "Dotum", "굴림", "Gulim"; letter-spacing:-0.5px; line-height:1.5; border:none; list-style:none;}
.wrap .container {max-width:1920px; padding-left:0; padding-right:0;}
.story {text-align:center;}
.story_visual {position:relative; overflow:hidden; margin-bottom:80px; width:100%; height:400px; font-size:0; background:#000;}
.story_visual img,
.story_visual video {position:relative; z-index:1; width:100%; height:100%; object-fit:cover; opacity:0.5;}
.story_visual .visual_text {position:absolute; top:0; left:0; right:0; bottom:0; z-index:10; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;}
.story_visual .visual_text .title {font-size:20px; font-weight:700; color:#fff;}
.story_visual .visual_text .sub_title {font-size:33px; font-weight:700; color:#fff; line-height:1.2;}
.story_visual .visual_text .block {display:block; font-size:0;}
.story_in {margin:0 auto; max-width:1200px;}
.story_sub .story_in {border-top:1px solid #eee; margin-top:80px; padding-top:80px;}
.story_in .title {margin-bottom:40px; font-size:35px; font-weight:700;}
.story_first .title {margin-bottom:30px; font-size:50px; font-weight:700;}
.story_in p {margin-top:20px; font-size:18px; font-weight:300;}
.story_in .pic_group + p {margin-top:60px;}
.story_in p.sub_title {position:relative; padding-bottom:60px; font-size:25px; font-weight:700;}
.story_in p.sub_title::after {content:''; position:absolute; bottom:0; left:50%; display:block; transform:rotate(45deg); height:40px; width:1px; background:#555;}
.story_in p.en_text {font-size:20px; font-weight:700;}
.story_in .block {display:block; font-size:0;}
.story_in .point {color:#00AFEC;}
.story_in .box .text p:first-child {margin-top:0 !important;}
.story_in .box {display:flex; flex-wrap:wrap; gap:60px; align-items:center;}
.story_in .pic_group + .box {margin-top:30px;}
.story_in p + .pic_group {margin-top:50px;}
.story_in .pic_group {display:flex; flex-wrap:wrap; gap:15px;}
.story_in .pic {overflow:hidden; height:300px; border-radius:20px;}
.story_in .pic img {width:100%; height:100%; object-fit:cover;}
.story_in .pic_group .pic {width:calc(33.3333% - 10px);}
.story_in .box .pic,
.story_in .box .text,
.story_in .box .text_box {width:calc(50% - 30px);}
.story_in .text_box {display:flex; gap:8px; flex-direction:column; padding:30px 60px; background:#F2F1ED; border-radius:20px;}
.story_in .text_box li {display:flex; align-items:center; text-align:left; font-size:18px; font-weight:500;}
.story_in .text_box li::before {content:''; display:inline-block; margin-right:5px; background:#000; width:5px; height:5px; border-radius:5px;}
.story01 .box .pic {order:2;}
.story01 .box .text {order:1; text-align:right;}
.story02 .box .text {order:2; text-align:left;}
.story03 .box .pic {order:1;}
.story03 .box .text {order:2; text-align:left;}

@media (max-width:1200px) {
.story_visual {margin-bottom:80px; margin-bottom:60px; height:400px; height:350px;}
.story_visual .visual_text .title {font-size:20px; font-size:18px;}
.story_visual .visual_text .sub_title {font-size:33px; font-size:30px;}
.story_sub .story_in {margin-top:80px; margin-top:60px; padding-top:80px; padding-top:60px;}
.story_in {padding-left:10px; padding-right:10px;}
.story_in .title {margin-bottom:40px; margin-bottom:30px; font-size:35px; font-size:27px;}
.story_first .title {margin-bottom:30px; margin-bottom:20px; font-size:50px; font-size:40px;}
.story_in p {margin-top:20px; margin-top:15px; font-size:18px; font-size:16px;}
.story_in .pic_group + p {margin-top:60px; margin-top:50px;}
.story_in p.sub_title {padding-bottom:60px; padding-bottom:40px; font-size:25px; font-size:22px;}
.story_in p.sub_title::after {height:40px; height:30px;}
.story_in p.en_text {font-size:20px; font-size:18px;}
.story_in .box {gap:60px; gap:50px;}
.story_in .pic_group + .box {margin-top:30px; margin-top:20px;}
.story_in p + .pic_group {margin-top:50px; margin-top:40px;}
.story_in .pic_group {gap:15px; gap:9px;}
.story_in .pic {height:300px; height:270px; border-radius:20px; border-radius:10px;}
.story_in .pic_group .pic {width:calc(33.3333% - 10px); width:calc(33.3333% - 6px);}
.story_in .box .pic,
.story_in .box .text,
.story_in .box .text_box {width:calc(50% - 30px); width:calc(50% - 25px);}
.story_in .text_box {gap:8px; gap:5px; padding:30px 60px; padding:25px 50px; border-radius:20px; border-radius:10px;}
.story_in .text_box li {font-size:18px; font-size:16px;}
}

@media (max-width:997px) {
.story_visual {margin-bottom:60px; margin-bottom:40px; height:350px; height:220px;}
.story_visual .visual_text .title {font-size:18px; font-size:17px;}
.story_visual .visual_text .sub_title {font-size:30px; font-size:25px;}
.story_sub .story_in {margin-top:60px; margin-top:40px; padding-top:60px; padding-top:40px;}
.story_in .title {margin-bottom:30px; margin-bottom:20px; font-size:27px; font-size:22px;}
.story_first .title {margin-bottom:20px; margin-bottom:18px; font-size:40px; font-size:30px;}
.story_in p {margin-top:15px; margin-top:10px; font-size:16px; font-size:14px;}
.story_in .pic_group + p {margin-top:50px; margin-top:40px;}
.story_in p.sub_title {padding-bottom:40px; padding-bottom:30px; font-size:22px; font-size:20px;}
.story_in p.sub_title::after {height:30px; height:20px;}
.story_in p.en_text {font-size:18px; font-size:16px;}
.story_in .box {gap:50px; gap:30px;}
.story_in .pic_group + .box {margin-top:20px; margin-top:15px;}
.story_in p + .pic_group {margin-top:40px; margin-top:30px;}
.story_in .pic {height:270px; height:200px;}
.story_in .pic_group .pic {width:calc(33.3333% - 6px);}
.story_in .box .pic,
.story_in .box .text,
.story_in .box .text_box {width:calc(50% - 25px); width:calc(50% - 15px);}
.story_in .text_box {gap:5px; padding:25px 50px;}
.story_in .text_box li {font-size:16px; font-size:14px;}
}

@media (max-width:770px) {
.story_visual {margin-bottom:40px; margin-bottom:30px; height:220px; height:200px;}
.story_visual .visual_text {gap:5px;}
.story_visual .visual_text .title {font-size:17px; font-size:16px;}
.story_visual .visual_text .sub_title {font-size:25px; font-size:22px;}
.story_sub .story_in {margin-top:40px; margin-top:30px; padding-top:40px; padding-top:30px;}
.story_in .title {margin-bottom:20px; margin-bottom:18px; font-size:22px; font-size:20px;}
.story_first .title {margin-bottom:18px; margin-bottom:15px; font-size:30px; font-size:25px;}
.story_in p {margin-top:10px; margin-top:5px;}
.story_in .pic_group + p {margin-top:40px; margin-top:20px;}
.story_in p.sub_title {padding-bottom:30px; padding-bottom:20px; font-size:20px; font-size:18px;}
.story_in p.sub_title::after {height:10px;}
.story_in p.en_text {font-size:16px; font-size:15px;}
.story_in .box {gap:30px; gap:20px;}
.story_in .pic_group + .box {margin-top:15px; margin-top:10px;}
.story_in p + .pic_group {margin-top:30px; margin-top:20px;}
.story_in .pic {height:200px; height:180px;}
.story_in .pic_group .pic,
.story_in .box .pic,
.story_in .box .text,
.story_in .box .text_box {width:100%;}
.story_in .text_box {gap:5px; padding:25px 50px; padding:25px 50px;}
.story01 .box .pic {order:1;}
.story01 .box .text {order:2; text-align:center;}
.story02 .box .text {order:2; text-align:center;}
.story03 .box .text {order:2; text-align:center;}
}

@media (max-width:460px) {
.story_visual .visual_text .title {font-size:16px; font-size:15px;}
.story_visual .visual_text .sub_title {font-size:22px; font-size:20px; padding-left:25px; padding-right:25px;}
.story_visual .visual_text .block {display:none;}
/*.story_in .block {display:none;}*/
.story_in .text_box {gap:8px; gap:3px;}
.story_in p {margin-top:5px; margin-top:3px; padding-left:15px; padding-right:15px;}
}