@charset "utf-8";

/* =========================== PAGE */
.pagecommon{position:relative;font-size:17px;letter-spacing:-.3px;line-height:1.8;color:#555}
.pagecommon *{word-break:keep-all}

/* 인사말 */
#history1004 .tit_box{text-align:center}
#history1004 .tit_box .tit{font-size:53px;font-weight:700;color:#000;font-family:'Inter'}
#history1004 .tit_box .tit_txt{margin:13px 0 52px;font-size:20px;white-space:pre-line}
#history1004 .his_wrap .bg_img{width:100%;height:510px;background:url('/images/company/history/history1004_bg.jpg') no-repeat center;background-size:cover}
#history1004 .his_wrap .scroll{position:relative;width:65px;height:65px;padding-top:12px;text-align:center;margin: -20px auto 0;border-radius:100%;background:#e74d3c}
#history1004 .his_wrap .scroll:before{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);content:'';width:15px;height:15px;border-radius:5px;background:#e74d3c}
#history1004 .his_wrap .scroll img{animation: scroll 1s infinite linear}
@keyframes scroll{from{opacity:0;transform:translateY(0)}50%{opacity:1;transform:translateY(6px)}100%{opacity:0;transform:translateY(12px)}}
#history1004 .his_list{position:relative;margin-top:6px;padding:72px 0 94px}
#history1004 .his_list:before{position:absolute;left:50%;top:0;content:'';width:1px;height:100%;background:#e1e1e1}
#history1004 .his_list dl{position:relative;width:50%;margin-left:50%;padding:0 0 67px 90px}
#history1004 .his_list dl:nth-child(2n){margin-left:0;margin-right:50%;padding:0 90px 67px 0;text-align:right}
#history1004 .his_list dl:before{position:absolute;left:-5px;top:34px;content:'';width:11px;height:11px;border:3px solid #888;border-radius:100%;background:#fff}
#history1004 .his_list dl:nth-child(2n):before{left:auto;right:-6px}
#history1004 .his_list dl dt{font-size:45px;font-weight:800;color:#000;font-family:'Inter'}
#history1004 .his_list dl dd{margin-top:26px}
#history1004 .his_list dl dd ul li{position:relative;padding-left:16px;line-height:37px}
#history1004 .his_list dl:nth-child(2n) dd ul li{padding-left:0;padding-right:16px}
#history1004 .his_list dl dd ul li:before{position:absolute;left:0;top:17px;content:'';width:3px;height:3px;background:#333}
#history1004 .his_list dl:nth-child(2n) dd ul li:before{left:auto;right:0}
#history1004 .last_year{position:relative;padding-top:47px;text-align:center}
#history1004 .last_year:before{position:absolute;left:50%;top:0;transform:translateX(-50%);content:'';width:15px;height:15px;border:5px solid #e74d3c;border-radius:100%;background:#fff}
#history1004 .last_year span{display:block;font-size:45px;font-weight:700;line-height:50px;color:#000;font-family:'Inter'}

@media(max-width:1230px){
#history1004 .tit_box .tit{font-size:45px}
#history1004 .tit_box .tit_txt{font-size:18px}
#history1004 .his_wrap .bg_img{height:330px}
#history1004 .his_list dl:before{top:26px}
#history1004 .his_list dl dt{font-size:35px}
#history1004 .last_year span{font-size:35px}
}
@media(max-width:1024px){
.pagecommon{font-size:16px}
#history1004 .tit_box .tit{font-size:40px}
#history1004 .his_list{padding:72px 15px 65px}
#history1004 .his_list dl{padding:0 0 50px 50px}
#history1004 .his_list dl:nth-child(2n){padding:0 50px 50px 0}
#history1004 .his_list dl dt{font-size:30px}
#history1004 .his_list dl dd{margin-top:15px}
#history1004 .his_list dl dd ul li{line-height:27px}
#history1004 .his_list dl dd ul li+li{margin-top:8px}
#history1004 .his_list dl dd ul li:before{top:11px}
#history1004 .last_year span{font-size:30px}
}
@media(max-width:768px){
.pagecommon{font-size:14px}
#history1004 .tit_box .tit{font-size:30px}
#history1004 .tit_box .tit_txt{margin:13px 0 45px;padding:0 30px;font-size:16px;white-space:normal}
#history1004 .his_wrap .bg_img{height:220px}
#history1004 .his_wrap .scroll{width:45px;height:45px;margin:-22.5px 0 0 8px;padding-top:5px}
#history1004 .his_wrap .scroll img{width:12px}
#history1004 .his_list{padding:55px 15px 15px}
#history1004 .his_list:before{left:30px}
#history1004 .his_list dl{width:100%;margin:0 0 0 15px !important;padding:0 0 50px 25px !important;text-align:left !important}
#history1004 .his_list dl:before{left:-3px !important;right:auto !important;top:16px;width:7px;height:7px;border:2px solid #888}
#history1004 .his_list dl dt{font-size:23px}
#history1004 .his_list dl dd ul li{padding:0 0 0 16px !important}
#history1004 .his_list dl dd ul li:before{left:0 !important;right:auto !important}
#history1004 .last_year{padding:25px 0 0 25px;text-align:left}
#history1004 .last_year:before{left:25px;width:11px;height:11px;transform:none;border:3px solid #f37d1e}
#history1004 .last_year span{font-size:23px}
}
@media(max-width:480px){
#history1004 .tit_box .tit{font-size:25px}
#history1004 .tit_box .tit_txt{margin:13px 0 40px;padding:0 15px;font-size:15px;line-height:26px}
#history1004 .his_wrap .bg_img{height:150px}
#history1004 .his_wrap .scroll{width:35px;height:35px;padding:0}
#history1004 .his_wrap .scroll:before{display:none}
#history1004 .his_wrap .scroll img{width:9px}
#history1004 .his_list{margin-top:0}
#history1004 .his_list:before{left:25px}
#history1004 .his_list dl{margin-left:11px !important;padding:0 0 40px 17px !important}
#history1004 .his_list dl:before{top:13px;width:6px;height:6px}
#history1004 .his_list dl dt{font-size:18px}
#history1004 .his_list dl dd ul li+li{margin-top:0}
#history1004 .last_year{padding:20px 0 0 20px}
#history1004 .last_year:before{left:22px;width:7px;height:7px;border:2px solid #f37d1e}
#history1004 .last_year span{font-size:18px;line-height:35px}
}