/*---- content ----*/
.content {opacity: 0; margin-top:200px;}
#content {width:1200px; padding:100px 0; overflow: hidden; margin:auto;}
#content>h1 {text-align: center; font-size:30px; margin-top:30px;}
#content>h2 {text-align: center; font-size:16px; color:#666; line-height: 55px; margin-bottom:50px;}
#content>h3 {width:50px; height:1px; margin:auto; margin-bottom:30px; background:#e5e5e5;}
#content h4 {font-size:150px; position: absolute; margin-top:-130px; left:50%; font-family: "nanumEB"; z-index: -1; color:rgba(0,0,0,0.05)}

#content ul {width:175px; margin:auto; margin-bottom:100px; overflow: hidden; height:40px;}
_:-ms-input-placeholder, :root #content ul { width:177px; }
#content li {cursor: pointer; padding:10px 20px; font-size:16px;}
#content li:hover {border-bottom:1px solid;}


/*---- content1 ----*/
#content1 {width:1200px; overflow: hidden; padding-bottom:0; opacity: 0; margin-top:200px; display: none;}

#content1 dl.box {width:1200px; height:500px; margin:auto;}
#content1 dl.box dt {width:470px; height:270px; font-size:22px; font-family: "nanumEB"; text-align: center; float:left; background:#eee; margin-top:30px; box-shadow: 0 0 30px rgba(0,0,0,0.3); overflow: hidden;}
#content1 dl.box dd {width:550px; height:500px;}
#content1 dl.box dd h1 {font-size:30px; margin-bottom:30px; color:#616e76;}
#content1 dl.box dd h2 {font-size:16px; margin-bottom:20px; line-height: 25px;}
#content1 dl.box dd h2 span {font-size:16px; color:#616e76;}
#content1 dl.box dd h3 {width: 8px; height:8px; background:#616e76; border-radius: 50%; position: relative; left:-54px; top:-120px;}
#content1 dl.box dd h3::before {content:""; border:1px solid #616e76; padding:8px; border-radius: 50%; position: absolute; left:-5px; top:-5px;}
#content1 dl.box dd h3::after {content:""; width:30px; height:1px; background:#616e76; position: absolute; left:13px; top:4px;}

#content1 dl.box:nth-child(2n-1) dt {margin-right:80px; margin-left:30px;}
#content1 dl.box:nth-child(2n-1) dd {float:right; border-left:1px solid silver; padding-left:50px;}
#content1 dl.box:nth-child(2n-1) dd h1 {margin-top:120px;}

#content1 dl.box:nth-child(2n) dt {float:right; margin-right:30px;}
#content1 dl.box:nth-child(2n) dd {border-right:1px solid silver; border-left:0px; float:left; text-align: right; padding-right:49px;}
#content1 dl.box:nth-child(2n) dd h3 {left:595px; top:-190px;}
#content1 dl.box:nth-child(2n) dd h3::after {left:-35px;}
#content1 dl.box:nth-child(2n) dd h4 {margin-left:-380px; margin-top:-150px;}

#content1 dl.box:nth-child(2n) dd h1 {margin-top:80px;}


#content1 dl.box:nth-child(1) dt {background:url(../images/history_3.jpg
) no-repeat center center; background-size:cover;}

#content1 dl.box:nth-child(2) dt {background:url(../images/history_1.jpg
) no-repeat center center; background-size:cover;}

#content1 dl.box:nth-child(3) dt {background:url(../images/history_2.jpg
) no-repeat center center; background-size:cover;}




/*---- content2 ----*/

#content2 {width:100%; opacity: 0; margin-top:200px; display: none;}
#content2 dl {width:600px; float:left; margin-bottom:60px;}
#content2 dl dt {width:180px; height:250px; float:left; background:#eeee; margin-right:20px; border:1px solid #eee;}
#content2 dl dd {float:left;}
#content2 dl dd h1 {border-bottom:1px solid #eee; font-size:17px; line-height: 30px; padding:10px 0; width:380px;}
#content2 dl dd h2 {font-size:14px; padding:20px 0;}

#content2 dl:nth-child(1) dt{background:url(../images/certificate.jpg) no-repeat center center; background-size:cover;}
#content2 dl:nth-child(2) dt{background:url(../images/certificate2.jpg) no-repeat center center; background-size:cover;}
#content2 dl:nth-child(3) dt{background:url(../images/certificate3.png) no-repeat center center; background-size:cover;}

/*---- tablet ----*/
@media(min-width:601px) and (max-width:1199px) {
    
    #content {width:100%; padding:50px 0 0 0;}
    #content ul {margin-bottom:50px;}
    #content h1 {font-size:25px; text-align: center;}
    #content h2 {font-size:14px; text-align: center;}
    #content h3 {margin-bottom:30px; text-align: center;}
    #content h4 {display: none;}
    
    #content1 {width:100%;}
    #content1 dl.box {width:100%; height:450px; overflow: hidden; margin-bottom:30px;}
    #content1 dl.box dt {width:calc(100% - 20px); height:200px;}
    #content1 dl.box dd {border:none; height:0; width:100%;}
    #content1 dl.box dd h1 {margin-bottom:20px;}
    #content1 dl.box dd h2 {font-size:14px;}
    #content1 dl.box dd h3 {display: none;}
    
    #content1 dl.box:nth-child(2n-1) dt {margin:0; margin:0 10px; float:left; margin-bottom:30px;}
    #content1 dl.box:nth-child(2n-1) dd {padding-left:0; float:left; border-left:none;}
    #content1 dl.box:nth-child(2n-1) dd h1 {margin-top:0;}
    #content1 dl.box:nth-child(2n) {height:500px;}
    #content1 dl.box:nth-child(2n) dt {margin:0; margin:0 10px; float:left; margin-bottom:30px;}
    #content1 dl.box:nth-child(2n) dd {text-align: left; padding-right:0; float:left;}
    #content1 dl.box:nth-child(2n) dd h1 {margin-top:0;}
    
    
    #content2 dl {width:100%;}
    #content2 dl dt {margin:auto; float:none;}
    #content2 dl dd {width:100%;}
    #content2 dl dd h1 {text-align: center; font-size:15px; width:100%;}
    #content2 dl dd h2 {text-align: center;}
}

/*---- mobile ----*/
@media(max-width:600px){

    #content {width:100%; padding:50px 0 0 0;}
    #content ul {margin-bottom:50px;}
    #content h1 {font-size:25px; text-align: center;}
    #content h2 {font-size:14px; text-align: center;}
    #content h3 {margin-bottom:30px; text-align: center;}
    #content h4 {display: none;}
    
    #content1 {width:100%;}
    #content1 dl.box {width:100%; height:300px; overflow: hidden; margin-bottom:30px;}
    #content1 dl.box dt {width:calc(100% - 20px); height:120px;}
    #content1 dl.box dd {border:none; height:0; width:100%;}
    #content1 dl.box dd h1 {margin-bottom:20px;}
    #content1 dl.box dd h2 {font-size:14px;}
    #content1 dl.box dd h3 {display: none;}
    
    #content1 dl.box:nth-child(2n-1) dt {margin:0; margin:0 10px; float:left; margin-bottom:30px;}
    #content1 dl.box:nth-child(2n-1) dd {padding-left:0; float:left; border-left:none;}
    #content1 dl.box:nth-child(2n-1) dd h1 {margin-top:0;}
    #content1 dl.box:nth-child(2n) {height:380px;}
    #content1 dl.box:nth-child(2n) dt {margin:0; margin:0 10px; float:left; margin-bottom:30px;}
    #content1 dl.box:nth-child(2n) dd {text-align: left; padding-right:0; float:left;}
    #content1 dl.box:nth-child(2n) dd h1 {margin-top:0;}
    
    
    #content2 dl {width:100%;}
    #content2 dl dt {margin:auto; float:none;}
    #content2 dl dd {width:100%;}
    #content2 dl dd h1 {text-align: center; font-size:15px; width:100%;}
    #content2 dl dd h2 {text-align: center;}
}