html {width: 100%;height: 100%;margin: 0;padding: 0;} body {width: 100%;height: 100%;margin: 0;padding: 0;} #intro {background: url(bg_intro.jpg) no-repeat center top;background-size:cover;} #intro #intro_con {display:flex;justify-content: center;text-align:center;padding:120px 0;color:#fff;} #intro #intro_con .slogan {font-family: 'tvN';font-weight:700;padding:0 20px;margin-bottom:10px;font-size:70px;line-height: 0.9em;} #intro #intro_con .slogan > strong {font-family: 'tvN';font-weight:700;color:#00e160;} #intro #intro_con .slogan_txt {padding:0 10px;margin-bottom:80px;font-size:26px;} #intro #intro_con .link {display: flex;justify-content: center;margin-bottom:70px;} #intro #intro_con .link li {margin:0 20px;} #intro #intro_con .link li a {display:block;width:430px;height:430px;border-radius:50%;background: rgba(0, 0, 0, .3);transition:all .3s;} #intro #intro_con .link li a.ic01:hover {background: rgba(8, 134, 62, .9);} #intro #intro_con .link li a.ic02:hover {background: rgba(88, 31, 125, .9);} #intro #intro_con .link li a strong {display:block;font-size:32px;font-weight:bold;padding:90px 0 190px;} #intro #intro_con .link li a.ic01 strong {background: url(ic01.png) no-repeat center 78%;} #intro #intro_con .link li a.ic02 strong {background: url(ic02.png) no-repeat center 76%;} #intro #intro_con .link li a span {display:inline-block;font-size:16px;font-weight:bold;padding:13px 50px 10px 30px;border-radius:30px;position:relative;} #intro #intro_con .link li a span.link01 {background:#0fa54f;} #intro #intro_con .link li a span.link02 {background:#4e047e;} #intro #intro_con .link li a span::after {content:'→';position:absolute;top:13px;right:25px;} #intro #intro_con .cont {display: flex;justify-content: center;} #intro #intro_con .cont li {margin-right:1px;} #intro #intro_con .cont li a {display:block;width:300px;height:65px;line-height:65px;border-radius:65px;background: rgba(0, 0, 0, .3);font-size:17px;text-align:left;padding-left:30px;position:relative;} #intro #intro_con .cont li a::after {content:'+';position:absolute;top:0;right:30px;font-size:22px;} #intro #intro_con .cont li a em {font-weight:bold;} #intro #intro_footer {padding:50px;border-top: 1px solid rgba(255, 255, 255, .2);text-align:center;color:#fff;} #intro #intro_footer .title {font-size:30px;font-weight:bold;margin-bottom:5px;} #intro #intro_footer cite {font-size:15px;font-style: normal;text-transform: uppercase;} /* 레이어*/ #intro #cont_greeting {display:none;opacity: 0;transition: .5s;} #intro #cont_greeting.active {display:block;opacity: 1;position: fixed;top: 0;left:0;z-index:100;width:100%;height: 100%;} #intro #cont_history {display:none;opacity: 0;transition: .5s;} #intro #cont_history.active {display:block;opacity: 1;position: fixed;top: 0;left:0;z-index:100;width:100%;height: 100%;} #intro .overlay_bg {display:none;pointer-events: none;} #intro .overlay_bg.active {display:block;background-color: rgba(0, 0, 0, 0.8);position: fixed;width: 100%;height: 100vh;top: 0;left: 0;transition: .5s;opacity: 1;pointer-events: all;z-index:10;} #intro .btn_close_cont {position: absolute;top:10px;right:40px;width:70px;height: 70px !important;line-height: 70px;background-color: transparent;border: none;font-size:100px;font-weight:100;color: #999;cursor: pointer;z-index: 12;} #intro .btn_close:hover {} #intro #cont_greeting .cont_area, #intro #cont_history .cont_area {position: relative;z-index: 11;color:#333;text-align:left;height: 100%;overflow-y: scroll;} #intro #cont_greeting .cont_area .wp, #intro #cont_history .cont_area .wp {width:800px;margin:50px auto;border-radius:40px;} #intro #cont_greeting .cont_area .wp .tit, #intro #cont_history .cont_area .wp .tit {font-size:40px;font-weight:600;margin-bottom:40px;text-align:left;} #intro #cont_greeting .cont_area .wp .stit {display:inline-block;font-weight:500;font-size:18px;color:#00e160;} #intro #cont_greeting .cont_area .wp p {font-size:16px;margin-bottom:20px;} #intro #cont_greeting .cont_area .wp p:last-child {margin-bottom:0;} #intro #cont_greeting .cont_area .wp p.sign {padding-top:25px;font-weight:500} #intro #cont_greeting .cont_area .wp {color:#fff;padding:60px 40px 0;background:url(bg_intro_grt.png) no-repeat center top;background-size:cover;} #intro #cont_history .cont_area .wp {color:#fff;padding:60px 40px 0;background: url(bg_intro_his.png) no-repeat center top;background-size:cover;} #intro #cont_greeting .cont_area .wp .wp_icon {padding-bottom:240px;background:url(icon_intro_grt.png) no-repeat 100% 100%;} #intro #cont_history .cont_area .wp .wp_icon {padding-bottom:160px;background:url(icon_intro_his.png) no-repeat 100% 100%;} #intro #cont_history .his {} #intro #cont_history .his li {display:flex;flex-wrap:wrap;margin-bottom:15px;padding-bottom:15px;border-bottom:1px dashed #ddd;} #intro #cont_history .his li:last-child {margin-bottom:0;padding-bottom:0;border-bottom:0;} #intro #cont_history .his li strong {display:inline-block;width:20%;font-size:18px;font-weight:bold;color:#00e160;} #intro #cont_history .his li p {width:calc(80% - 20px);margin-left:20px;font-size:16px;font-weight:500;} #intro #cont_history .his li p span {display:block;font-size:14px;font-weight:bold;} @media all and (max-width: 999px) { #intro #intro_con {padding:90px 0;} #intro #intro_con .slogan {font-size: 60px;} #intro #intro_con .slogan_txt {margin-bottom: 60px;font-size: 19px;} #intro #intro_con .link li {margin: 0 10px;} #intro #intro_con .link li a {width:360px;height:360px;} #intro #intro_con .link li a strong {font-size: 28px;padding: 60px 0 170px;} #intro #cont_greeting .cont_area .wp, #intro #cont_history .cont_area .wp {width: 85%;} #intro #cont_greeting .cont_area .wp .tit {font-size:34px;} #intro #cont_greeting .cont_area .wp .tit em {font-size:inherit;} #intro #cont_greeting .cont_area .wp p br {display:none} #intro .btn_close_cont {top:0;right: 22px;width: 50px;height: 50px !important;line-height: 50px;font-size:80px;} } @media all and (max-width: 809px) { #intro #intro_con {padding: 50px 0;} #intro #intro_con .slogan {font-size: 42px;} #intro #intro_con .slogan_txt {margin-bottom: 40px;font-size: 15px;} #intro #intro_con .link {display: block;margin-bottom: 50px;text-align: center;} #intro #intro_con .link li {margin: 0 0 10px 0;} #intro #intro_con .link li a {display:inline-block;width: 260px;height: 260px;} #intro #intro_con .link li a strong {font-size: 22px;padding: 45px 0 105px;} #intro #intro_con .link li a.ic01 strong {background: url(ic01.png) no-repeat center 82%;background-size: 70px;} #intro #intro_con .link li a.ic02 strong {background: url(ic02.png) no-repeat center 82%;background-size: 65px;} #intro #intro_con .link li a span {font-size: 15px;padding: 13px 45px 10px 20px;} #intro #intro_con .link li a span::after {top: 12px;right: 20px;} #intro #intro_con .cont {display: block;text-align:center;} #intro #intro_con .cont li {margin-right: 0px;margin-bottom:2px;} #intro #intro_con .cont li a {display: inline-block;} #intro #intro_con .cont li a {display: inline-block;width: 270px;height: 60px;line-height: 60px;border-radius: 60px;font-size: 15px;padding-left: 25px;position: relative;} #intro #intro_con .cont li a::after {right: 25px;} #intro #intro_footer {padding: 40px;} #intro #intro_footer .title {font-size: 25px;} #intro #intro_footer cite {font-size: 14px;} #intro #cont_greeting .cont_area .wp, #intro #cont_history .cont_area .wp {margin: 40px auto;} #intro #cont_greeting .cont_area .wp .tit, #intro #cont_history .cont_area .wp .tit {font-size: 24px;margin-bottom: 20px;} #intro #cont_greeting .cont_area .wp .tit em {font-size:inherit;display:block;} #intro #cont_greeting .cont_area .wp .stit {font-size:16px;} #intro #cont_greeting .cont_area .wp p {font-size: 15px;} #intro #cont_greeting .cont_area .wp p.sign {padding-top:10px;font-weight:500} #intro #cont_greeting .cont_area .wp {background-size:cover;padding: 25px 25px 0;} #intro #cont_history .cont_area .wp {background-size:cover;padding: 25px 25px 0;} #intro #cont_greeting .cont_area .wp .wp_icon {background-size: 170px;padding-bottom:160px;} #intro #cont_history .cont_area .wp .wp_icon {background-size: 150px;} #intro #cont_history .his li {display: block;margin-bottom:10px;padding-bottom:10px;} #intro #cont_history .his li strong {display:block;width: 100%;margin-bottom:3px;} #intro #cont_history .his li p {width: 100%;margin-left: 0; font-size: 15px;} #intro .btn_close_cont {right:0;font-size:70px;} #intro #intro_footer {padding:30px;} #intro #intro_footer .title {font-size:22px;} #intro #intro_footer .title img {vertical-align: sub;} }