@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;600;700;900&display=swap');

body, talbe, th, td, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
	pre, form, fieldset, textarea, blockquote, span, * {
	font-family: 'Noto Sans KR', sans-serif;
}
clearfix:before, .clearfix:after {content: ""; display: table; clear: both;}
.wrap{width: 100%;}


header{position: relative; width: 1200px;   margin: 0 auto; background-color: #fff;}
header h1{width:180px;  line-height: 90px; position: absolute; left: 0; }
header h1 img{width: 100%;}

header nav { float: right; }
header nav > ul.gnb {width: 100%;text-align:left;}
header nav > ul.gnb > li { float: left;padding: 0px 20px; line-height: 90px; font-size: 16px; color:#053565; font-weight: bold;}
header nav > ul.gnb > li > a{display: block; color:#053565;}

/*모바일 햄벅바*/
nav.mo {z-index: 1000; display: none; }
nav.mo .closebtn {position: relative; width: 38px; height: 28px; cursor: pointer; top: 20px;}
nav.mo .closebtn span{ display: inline-block; transition: all 0.4s; box-sizing: border-box; position: absolute; left: -20px; width: 100%; height: 4px; background-color:#053565; border-radius: 4px;}

nav.mo .closebtn span:nth-child(1){top: 0;}
nav.mo .closebtn span:nth-child(2){top: 12px;}
nav.mo .closebtn span:nth-child(3){bottom: 0;}

nav.mo .closebtn.active span:nth-child(1){transform:translateY(12px) rotate(-45deg);}
nav.mo .closebtn.active span:nth-child(2){opacity: 0%;}
nav.mo .closebtn.active span:nth-child(3){transform:translateY(-12px) rotate(45deg);}

header nav.mo ul.hide{display: none;}
header nav.mo ul.gnb_mo {z-index: 20; width: 80%; background-color:#053565; position: absolute; top: 71px; left: 50%; transform: translateX(-50%); }
header nav.mo > ul.gnb_mo > li { font-size: 16px; color:#fff; font-weight: bold;  text-align: center; padding: 20px; border-bottom: solid 1px #114477; }
header nav.mo > ul.gnb_mo > li > a{display: block; color:#fff; }



.visual{background-image:url(../images/visual_bg.jpg); background-repeat: no-repeat; background-position: bottom right; background-size:cover; padding-top: 5%;}
.visual > ul{width: 1200px; margin:0 auto; position: relative;  }
.visual > ul > li.txt{letter-spacing:-1px; width: 46%; text-align: left; color: #fff; text-shadow:3px 3px 5px rgba(0,0,0,0.4);display: inline-block; padding-top: 50px; }
.visual > ul > li.txt > h2{ font-size:48px;  padding-bottom: 20px; font-family: 'Noto Serif KR', serif; font-weight: 300; letter-spacing: -4px; }
.visual > ul > li.txt > p{font-size:18px; line-height: 32px; font-weight:100; font-family: 'Noto Serif KR', serif; font-weight: 300; }
.visual > ul > li.visual_img {margin-left: 4%; background-image:url(../images/visual_04.png); background-repeat: no-repeat; background-position: center;  background-size:contain; width:590px ; height: 425px; display: inline-block; }




.con{width: 1200px; margin: 0 auto; padding: 80px 0px;}

section h3{font-size:34px; text-align: center; font-weight:700; padding-bottom: 30px; color:#053565;}
section#profile > article {position: relative; margin-bottom: 50px;}
section#profile > article > ul{ width: 100%;  }
section#profile > article > ul > li{display: inline-block; letter-spacing: -1.5px; }
section#profile > article > ul > li.intro { padding-top: 30px; padding-left: 20px;  }
section#profile > article > ul > li.intro::before{background: url(../images/mark.png)no-repeat ; content: ""; display: inline-block; width: 22px; height: 19px; padding-bottom: 10px;}
section#profile > article > ul > li.intro > span{font-size: 60px; line-height:30px;color:#053565; }
section#profile > article > ul > li.intro > h4{letter-spacing: -2px; font-weight: 600; font-size: 28px; line-height: 36px; color:#053565;  padding-bottom: 20px; font-family: 'Noto Serif KR', serif; }
section#profile > article > ul > li.intro > h4 > span{font-weight: 800; font-family: 'Noto Serif KR', serif;}
section#profile > article > ul > li.intro > p {font-size: 16px; padding-bottom: 20px; line-height: 24px;  }



section#profile > article > ul > li.profile_img{position: relative; z-index: 2;  vertical-align: top; width:345px; padding-bottom: 40px; vertical-align: bottom; }
section#profile > article > ul > li.profile_img > img {width: 100%; }
section#profile > article > ul > li.profile_img > img.mo_img{display: none;}

section#profile > article > div.profile_txt{ position:absolute; bottom: 0; background-color:#f2f2f2 ;width: 100%; display: block;  padding: 40px 0px; border-radius: 300px;}

section#profile > article > div.profile_txt > div.txt{width: 70%; margin-left:345px; padding-left: 25px;}
section#profile > article > div.profile_txt > div.txt h5{ font-size: 26px; color:#053565; display: inline-block; line-height: 20px;margin-bottom: 30px; }
section#profile > article > div.profile_txt > div.txt > ul {display: inline-block; width: 48%; }
section#profile > article > div.profile_txt > div.txt > p {font-size: 20px; padding-bottom: 10px;}
section#profile > article > div.profile_txt > div.txt > ul > li  { font-size: 16px; line-height: 24px; padding-bottom: 10px; background-image: url(../images/dot.png);background-repeat: no-repeat; background-position:0px 10px;  padding-left: 10px; width: 100%; }


.con_2_bg{background-image:url(../images/visual_bg_02.jpg); background-repeat: no-repeat; background-position: center; background-size:cover;}
#time_consult h3{color:#fff; padding-bottom: 10px;}
#time_consult p{font-size:18px; color:#fff; text-align: center; padding-bottom: 30px;}


#naver_map div#map{ background-color: #c2c2c2 }
#naver_map > ul{width: 100%; padding-top: 30px;}
#naver_map > ul > li{width: 49%; float: left; font-size:20px; padding: 30px;  box-sizing: border-box; margin-right: 2%; color: #fff; background-color: #053565;}
#naver_map > ul > li:last-child{ margin-right: 0px;  color: #053565; background-color: #f3f3f3;}
#naver_map > ul > li h4{ font-size: 26px;}

.iw_inner{padding: 15px;}
.iw_inner h3{font-size: 20px; padding-bottom: 5px; text-align: left;}
.iw_inner p {font-size: 16px;}


footer{background-color:#2b2b2b ; padding: 50px 20px;}
footer p{color: #f2f2f2; font-size: 14px; text-align: center; line-height: 24px;  text-decoration: none;}



/*반응형*/




@media screen and (max-width: 1200px){
    header{width: 100%;}
    header h1{left: 20px; transform: translateX(0%);}
    .visual > ul{width: 100%; padding:0px 20px; box-sizing: border-box;}
    .visual > ul > li.txt{ display: block; width: 100%; padding:50px 0px 20px 0px ;}
    .visual > ul > li.visual_img { display: block; margin: 0 auto; }

    .con{width: 100%; margin: 0 auto; padding: 80px 20px; box-sizing: border-box;}
    section#profile > article > div.profile_txt{padding: 30px 0px;}
    section#profile > article > div.profile_txt > div.txt > ul > li {width: 100%;}

    #map div.naver_map{width: 100%;}
    section#profile > article > div.profile_txt > div.txt > ul{width: 90%; display: block;}
    section#profile > ul > li{width: 80%;  padding-right: 0%; padding-bottom: 20px; display: table; position: relative; left: 50%; transform: translateX(-50%);}
    section#profile > ul > li > .profile_img{width: 100%; padding-right: 0%; }
    section#profile > ul > li > .profile_txt{display: table-cell; vertical-align:middle; padding-left: 30px;}

    section#profile > article > ul > li.intro {width: 50%;}

    section#profile > article > ul > li.intro > p > br { display: none;}
    section#profile > article{height: 670px;}
    section#profile > article.first{height: auto;}

    



  

}

@media only screen and (max-width: 820px){
    .infor-table{display:table; width:100%;}
     section#profile > article > ul > li.profile_img{width: 45%;}
     section#profile > article > div.profile_txt{  position: relative; bottom: 0; background-color:#f2f2f2 ;width: 100%; display: block;  padding: 30px 0px; border-radius: 10px;}
     section#profile > article > div.profile_txt > div.txt{margin-left: 0px;}
     section#profile > article > ul > li.profile_img{padding-bottom: 0px;}
     section#profile > article > ul > li.profile_img > img.pc_img{display: none;}
     section#profile > article > ul > li.profile_img > img.mo_img{display: block; vertical-align: bottom; }
     section#profile > article > ul > li.intro{padding-left:10px;}
     section#profile > article > div.profile_txt > div.txt{width: 90%;}
     section#profile > article{height: auto;}
     
}


@media screen and (max-width: 768px){
    
    
    header{height: 70px; position: sticky; z-index: 10; top: 0;  left: 0; right: 0; border-bottom: 1px solid #f2f2f2;} 
    nav.mo {z-index: 10; display: block;}
    header nav{display: none;}
    header h1{width: 150px; line-height: 60px; }
    
    .visual{ background-image:url(../images/visual_bg_mo.jpg); background-repeat: no-repeat; background-position: bottom right;  background-size:cover;}

  
    section h3{font-size:28px;padding-bottom: 20px;}
        
    section#profile > ul{ width: 100%; padding-top: 0px;}
    
    #time_consult > table{width: 100%;}
    #time_consult > table tr td.title{font-size:22px; width:40%;}
    #time_consult ul > li {font-size:18px; }

    #naver_map > ul > li{width: 100%; margin-right: 0%; margin-bottom: 20px; padding: 20px;}
    #naver_map > ul > li h4{ font-size: 18px;}
    #naver_map > ul > li{ font-size: 16px;}
    

     
        .visual > ul > li.visual_img {width: 100%; height:300px }
        
}

@media screen and (max-width: 650px){
    .con{padding: 70px 20px;}

    .visual > ul > li.txt{ display: block; width: 100%; padding:30px 0px 20px 0px ;}
    section h3{margin-bottom: 30px;}
    section#profile > ul > li > .profile_img{width: 100%; padding-bottom: 20px; }
    section#profile > ul > li{ padding-right: 0%; padding-bottom: 30px; display: block;}
    section#profile > ul > li > .profile_txt{width: 100%; display: block;  padding-left: 0px; padding-top: 30px;}
    section#profile > article > ul > li.profile_img{width:100%;}
    section#profile > article > ul > li.intro{width: 100%; display: block;}
    section#profile > article > div.profile_txt > div.txt h5{font-size: 24px;}
    section#profile > article{margin-bottom: 80px;}
    section#profile > article:nth-child(4){margin-bottom: 0px;}


}

@media screen and (max-width: 480px){
   
 .visual > ul > li.txt{width: 90%;}
 .visual > ul > li.txt > h2{font-size:32px; font-weight: 700; padding-bottom: 10px;  }
 .visual > ul > li.txt > h2 span{ font-weight: 300;}
 .visual > ul > li.txt > p{font-size:16px; line-height: 24px; }
    .visual > ul > li.visual_img { height:240px }
    
         section#profile > ul > li{ width: 100%}


    section#profile > article > ul > li.intro {padding-left: 0px;}
  
    
}


@media screen and (max-width: 380px){

       .visual > ul > li.visual_img { height:200px }
       

   }
@media screen and (max-width: 280px){

    .visual > ul > li.visual_img { height:160px }
    

}