ul, li, a {list-style: none; text-decoration: none;}
a {color: inherit;}
.wrap {width: 100%; box-sizing: border-box; }
.introduce_top {background-image: url(../img/introduce.jpg); width: 100%; height: 840px; content: ''; display: block; background-size: cover; background-repeat: no-repeat; position: relative; 
    background-position-y: 93%;
}

/*top 타이틀*/
.introduce_title {position:absolute; top:46%; color:#ffffff; left:50%; transform:translate(-50%,-50%);}
.introduce_title p {font-size: 60px; color: transparent; text-shadow: 0 0 2px #ffffff;}
.introduce_title h3 {font-size:50px; line-height: 50px; font-weight: 600; position: relative; text-align: center;} 
.introduce_title h3::before {
    background-image: url(../img/introduce_title2.png);
    display: block;
    width: 18.5em;
    height: 2.6em;
    background-size: cover;
    position: absolute;
    content: '';
    left: 50%;
    transform: translate(-50%,-50%);
    top: 50%;
    animation: 2.8s introduce ease forwards;
}
@keyframes introduce {
    0% { top:-100%; opacity: 0;} 50% { opacity: 0.3;} 80% {opacity: 0.5; } 100% {top:-58%; opacity: 1; } }

    /*top 네이비게이션*/
.introduce_nav {position: absolute; left:50%; transform: translate(-50%,0); bottom: 30%; width: 100%; max-width: 1100px;}
.introduce_nav ul { display: flex; width: 100%; height: 1px; background-color:rgba(255,255,255,0.3); position: relative;}
.introduce_nav ul li {width: 50%; height: 20px; text-align: center; position: relative;}
.introduce_nav ul li::before {display:none; content:''; width: 50%; height: 3px; background: #ffffff; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);}  
.introduce_nav ul li.on::before{display: block;}

.introduce_nav ul li button {display:block; width: 100%; font-size: 1.5em; font-weight: 100; padding-top: 12px; color:#ffffff; background: none; border:none; cursor: pointer;}
.introduce_nav ul li button::before {content:'';  width:0; transition: all 0.5s ease;}
.introduce_nav ul li button:hover::before {content:''; width: 50%; height: 3px; background: rgba(255,255,255,0.5); 
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%); box-sizing: border-box;}


.introduce_body {padding-bottom: 5%; width: 100%; max-width: 1500px; margin: 0 auto;}
.introduce_wrap1 {display: none; padding-top:146px; width: 100%;}
.introduce_wrap1.on {display: inline-flex;}
.introduce_wrap1 img {width: 100%; max-width: 500px; height: 100%; max-height: 120px;}
.introduce_left {width: 40%; text-align: right;}
.introduce_right {width: 60%; padding-left: 10%; }

.introduce_txt h4 {font-size: 3em; color:#8c1002; line-height: 42px; padding-bottom: 78px;}
.introduce_txt p {font-size: 20px; color:#1f1f1f;}
.introduce_txt2 {width:100%; padding-top:150px; }
.introduce_ul {width:100%; box-sizing: border-box; display: flex; padding-left: 3%;}
.introduce_ul:nth-child(1) {border-top:1px solid#e73c29;}
.introduce_ul:nth-child(2) { border-top:1px solid #fac0b9; border-bottom:1px solid#e73c29;}
.introduce_ul div:nth-child(1) {width: 40%; }
.introduce_ul div:nth-child(2) {width: 60%; }
.introduce_ul div span:nth-child(1) {padding-right:10%}
.introduce_ul div { line-height: 74px; }
.introduce_ul div span  { box-sizing: border-box;}
.introduce_ul > div span:nth-child(1) {font-size: 24px; color:#8a1002; }
.introduce_ul > div span:nth-child(2) {color:#4f4e4d; font-size: 20px;}


.introduce_wrap2 { padding-top:146px; width: 100%; text-align: center; display: none;}
.introduce_wrap2.on {display: block;}
.introduce_wrap2 .introduce_txt h4 {display: inline-block; position: relative; }
.introduce_wrap2 .introduce_txt h4::before {content:'Directions'; position: absolute; left:-40%; top:-18%; color:#c8c5c5; z-index: -1; font-weight: 400; }

.root_daum_roughmap {width: 100% !important;}
.introduce_address {display: flex; width: 100%;  box-sizing: border-box; padding:0 8%; }
.introduce_address ul {width: 50%; box-sizing: border-box;  padding-top: 84px;}
.introduce_address ul li {display: flex; line-height: 20px; padding:18px 0; align-items: center;}
.introduce_address ul li span:nth-child(1) {font-size: 20px; color:#8a1002; font-weight: 500;}
.introduce_address ul li span.em {letter-spacing: 1.5em;}
.introduce_address ul li span:nth-child(2) {color:#4f4e4d; font-size: 18px; font-weight: 300;}
.introduce_address ul li .p4 { padding-left: 4%;}
.introduce_address div {width: 50%;  padding-top: 84px; position: relative;}
.introduce_address div::before {width: 1px; height: 200px; background-color: #e73c29; content: ''; display: block; position: absolute; top:0;}
.introduce_address div img {display: block; width:40%; margin: 0 auto;}



/* *************************반응형************************ */

 /* **********************모바일****************************/
 @media screen and (max-width:767px) {
    .introduce_title h3 {font-size: 3.5em;}
    .introduce_top {width: 100%; background-color: red;}
    .introduce_title h3::before {width: 100%; width: 8em; height: 1.5em;}
    .introduce_nav ul {width: 100%;}
    .introduce_nav ul li button {font-size: 1.3em;}
    .introduce_wrap1.on {display: block; padding:20% 5% 20% 5%}
    .introduce_left {margin: 0 auto;}
    .introduce_right {width: 100%; padding:0; }
    .introduce_txt {text-align: center;}
    .introduce_txt p {font-size: 1em;}
    .introduce_txt h4 {font-size: 2em; padding: 5% 0 8% 0;}
    .introduce_txt2  {padding-top: 20%;}
    .introduce_ul {padding: 0; display: block;}
    .introduce_ul div {padding:5%}
    .introduce_ul div:nth-child(1) {width: 100%;}
    .introduce_ul div:nth-child(2) {width: 100%;}
    .introduce_ul div span:nth-child(1) {padding-right: 5%;}
    .introduce_ul > div span:nth-child(1) {font-size: 1em; font-weight: bold;}
    .introduce_ul > div span:nth-child(2) {font-size: 1em;}
 }


 /************************************* 모바일2 *************************************/

 @media screen and (max-width:480px) {
    .introduce_nav {bottom: 40%;}
    .introduce_title h3 {font-size: 2em;}
    .introduce_ul div {line-height: 1.5em;}
    
    .introduce_ul > div:nth-child(1) {padding-bottom: 0;}
    .introduce_ul > div {display: flex; justify-content: space-between;}
    .introduce_ul > div span:nth-child(1) {width: 30%;}
    .introduce_ul > div span:nth-child(2) {width: 70%;}
    .introduce_address ul {padding-right: 5%}
    .introduce_address ul li {display: block; padding-top:0}
    .introduce_address ul li span {display: block; }
    .introduce_address ul li span.em {letter-spacing: 0;}
    .introduce_address ul li span:nth-child(1) {font-size: 1em; }
    .introduce_address ul li span:nth-child(2) {font-size: 0.9em; line-height: 1.2em; padding-top:5%}
    .introduce_address div img {width: 70%;}
    

}