body {
    margin: 0;
    padding: 0;
    background-color: #04070E;
    background-image: url('images/bg_aperture.png'), url('images/bg_frameline.png');
    background-repeat: no-repeat, no-repeat;
    background-position: 94% 7%, 5% 95%;
    font-family: 'Jost', sans-serif;
}

.frame {
    width: 1600px;
    margin: 0 auto;
    color: aliceblue;
}

/* Navigation */
nav {
    margin-bottom: 60px;
}

nav h2 {
    cursor: pointer;
    display: inline-block;
    font-family: "pretendard";
    opacity: 1;
    transition: all 0.5s;
    font-size: 16px;
    font-weight: 100;
    padding-top: 7px;
    
}

nav h2:hover {
    color: #61dEE2;
    opacity: 1;
}

nav ul {
    font-family: "pretendard";
    font-weight: 100;
    list-style: none;
    float: right; 
    font-size: 16px;
}

nav ul li {
    cursor: pointer;
    display: inline-block;
    padding: 7px 30px;
    transition: all 0.5s;
}

.Tutorial:hover {
    color:crimson;
    transform: scale(1.5);
}

.Source:hover {
    color:darkorange;
    transform: scale(1.5);
}

.Question:hover {
    color:aqua;
    transform: scale(1.5);
}

/* Description Section */
.description{
    margin-bottom: 80px;
}

.description h2 {
    font-size: 36px;
    margin-bottom: 30px;
}


.description p {
    font-family: "pretendard";
    font-size: 16px;
    font-weight: 200;
    color:azure;
    opacity: 0.8;
    line-height: 1.6rem;   
}


/* Main */
main {
    position: relative;
    height: 900px;
    background: url('images/bg.png') no-repeat;
    border: 1px dashed cyan;
   
}

.ui {
    position: absolute;
    display: inline-block;
   
    background-color: rgba (175,21,44,3);
}

.ui img {
    display: block;
}

/* iso icon */



.icon-iso {
    top: 43px;
    left: 44px;
    opacity: 0.5;
    cursor: url(hand.cur), pointer;
    
    
}

/* interactive iso info */
.icon-iso:hover{
    filter: hue-rotate(15deg) saturate(2);
    opacity: 1;
    transform: scale(1);
}

.iso-info{
    left: 200px;
    top: 50px;
    transform-origin: top left;
    transform: scale(0);
    transition: all 0.5s;
    
}

.icon-iso:active .iso-info{
    
   transform:scale(1); 
          
}



/* aperture icon */
.aperture {
    top: 200px;
    left: 33px;
    opacity: 0.5;
    cursor: url(hand.cur), pointer;
    
}


.aperture:hover{
    opacity: 1;
    filter: hue-rotate(15deg) saturate(2);
    transform: scale(1);
}


.aperture_branch{
    left: 82px;
    top: 130px;
    
    transform-origin: top left;
    transform: scale(0);
    transition: all 0.5s;
    cursor: url(hand.cur), pointer;
     
}

.aperture:active .aperture_branch{
    transform:scale(1);
   
          
}







/* main frame */
.mainframe {
    left: 150px;
    opacity: 0.5;
}

.mainframe:active {
    opacity: 1;
}

/* Setting btn */
.btn-setting {
    left:44px;
    bottom: 43px;
    opacity: 0.5;
    transition: transform 7s;
    
}

.btn-setting:hover {
    transform: rotate(360deg);
    
}

/* shape-correction btn */
.shape-correction{
    left : 44px;
    bottom: 200px;
    opacity: 0.5;
    transition: transform 2s;
    
}

.shape-correction:hover {
    transform: rotateX(-180deg) rotatey(60deg) rotateZ(30deg);
    
}

/* frame btn */
.btn-frame{
    left : 44px;
    bottom : 356px;
    opacity: 0.5;
    cursor: url(hand.cur), pointer;
}

.btn-frame:hover {
    opacity: 1;
}


/* battery ui */
.ui-battery{
    left: 220px;
    top: 70px; 
    
}

.battery-bar{
    position: absolute;
    left : 5px;
    top: 5px;
    opacity: 0;
    transition: opacity 0.5s;
}

.ui-battery:hover .battery-bar{
    opacity: 1;
}

/* center focus */
.focus{

    top: 300px;
    left: 620px;
    opacity:0.5;
    
        
}

.condition-container{
    width:200px;
    top: 816px;
    left:   630px;
    cursor: url(hand.cur), pointer;
    
  
}

.condition-container:hover .condition_value{
    transform: translateX(200px);
    
}


/* condition bar */
.condition_bar {
    
    bottom: 112px;
    left: 630px;  
}

.condition_value{
    position: absolute;
    bottom:50px;
    transform: rotate(180deg);
    transition: transform 3s;
}

/* reverse btn */
.reverse{
    right:29px;
    top:43px;
    transition: transform 2s;
    cursor: url(hand.cur), pointer;
}

.reverse:hover{
    transform: rotate(180deg);
    
    
}

/* gallery btn */
.gallery{
    right:29px;
    bottom:44px;    
}

gallery:hover {
    filter: brightness(10);
    
}

/* text btn */


.contact{
    right: 44px;
    bottom: 286px;
    
}

.editor{
    right: 44px;
    bottom: 402px; 
    cursor: url(hand.cur), pointer;
}

.editor:hover {
    /* filter: hue-rotate(15deg) saturate(2);
    transform: scale(1);
     */
}



.editor_image{
    left: -900px;
    top: -200px;
    transform-origin: top left;
    transform: scale(0);
    transition: all 1s ease-in;
    
    
}

.editor:active .editor_image{
    transform: scale(1);
    transform : rotate(10deg);
}



/* rotate btn */
.additional-line{
    right:209px;
    bottom:88px;
}

.additional-btn{
    right:264px;
    bottom:142px;
    transition: transform 2s;
    
}

.additional-btn:hover {
    transform: rotate(-180deg);  
    
}

.additional-line:hover {
    filter: hue-rotate(15deg) saturate(2);
    
}






/* Footer */
footer {
    text-align: center;
    color: azure;
    height: 163px;
    margin: 80px 0;
    background: url('images/bg_framebox.png') no-repeat;
    background-position: center;
}

footer p {
    line-height: 21px;
    text-shadow: 1px 1px 0 #04070E;

}