@charset "UTF-8";
/* CSS Document */
@import url(https://cloud.greensk.greenpeace.org/css-ce-ice-notosanskr);
html{background: url("https://www.greenpeace.org/static/planet4-korea-stateless/2021/08/2f725428-kr_2021_ocean_sanctuaries_main.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
body, html {
  
    font-family: 'Noto Sans KR', sans-serif;
    height: 100%;
 padding:0px;
 margin:0px;
 min-height: 100%;
}
.async-hide { opacity: 0 !important} 
/*text*/
h2{font-size: 1.5em; font-weight: 600; line-height: 1.3; color:#6c0; text-align: center;}
p{font-size: 1em; font-weight: 300; text-align: justify;}
h3{font-size: 1.2em; font-weight: 500; color:#6c0;}
.italic{font-style: italic; font-weight: 200; font-size: 0.9em;}
header{position: fixed; 
top:0px;
padding-top:15px;
margin: 0px;
z-index: 1; width:100%;
background-color: rgba(0,0,0,0.57); height: auto; padding-bottom: 15px;
border-bottom: 1px dotted rgba(158,158,158,0.68);
}
.log>img{width:100%;
max-width: 200px; float: left; padding-left: 6%;}
.top_button{float: right;display: block; margin-right: 6%; width:100px; color:#fff; background-color: #6c0; padding:10px 10px; font-size:0.9em; border-radius: 4px; 
  transition: all 0.5s;
  cursor: pointer;
 border: none;
   }
.top_button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.top_button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
 
}
a{text-align: center; text-decoration: none;}
.top_button:hover span {
  padding-right: 12px;
  color:#fff;
}

.top_button:hover span:after {
  opacity: 1;
  right: 0;
  color:#fff;
}
.main{width:100%; height: auto; position: relative; padding-top:135px;}


.left_contents{width:52%; float: left; display: block; color: #fff; margin-left: 5%; margin-right: 2%; max-width: 850px}
.left_contents>img{ width:100%; height: auto;}
/*slide*/
 .caption{position:relative;
  width:100%;
  border: 5px solid #fff;
  overflow: hidden;
  margin-left: -5px;
}
.caption >img{display:block; width: inherit;}
.imgcaption{position:absolute;
  bottom: 3px; opacity:0;
  box-sizing: border-box;
  width: 100%; padding: 14px;
  background: #000;color:#fff;
  font-size: 0.875rem;
  transition: .5s;}
.caption:hover > .imgcaption{ opacity:.8;}
/*form*/
.en__field__input--text{width: 100% !important;}
.right_form{width: 31%; float: right; color:#7A7A7A; margin-right: 5%; background-color:#fff; padding: 30px; box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.5); max-width: 400px; }
.right_form>img{width: 100px; margin:auto; display: block; margin-bottom:0px;}
.form_text{font-size: 1em; letter-spacing: -2; line-height: 1.2; color:rgb(142, 142, 142); font-weight: 400;}
.form_text2{color:#3e423b; font-size: 0.9em; line-height: 1.2; font-weight: 400; font-style: italic;}
.en__field__element>input{margin-bottom:-5px; margin:auto; height: 40px;}
 .en__field--180587>label,.en__field--180586>label,.en__field--180588>label
  {display: none;}
  .en__field__label--item{font-size:0.8em;}
  

 .en__field--22133>label, .en__field--22141>label, .en__field--89669>label, .en__field--22133>label, .en__field--22141>label, .en__field--89669>label{display:none;}
 .en__field {
    padding-bottom: 6px !important;
} 
.privacy{font-size:0.8em; text-align:center; }
.privacy>a{text-decoration:underline; color:#6c0;}
.en__field--checkbox, .en__field__label{vertical-align: middle !important;}
label[for=all_check]{font-weight: 800;}
.en__field__element, .en__field__element--text {width:100% !important;}
.en__field__input--text{width:100% !important; border: 1px solid #dcdada;
    border-radius: 2px; padding-left: 5px;}
  .en__field__item{padding: 1px 0 !important;}
  .en__submit >button{width: 100%;
    height: 40px;
    border: none;
    border-radius: 3px;
    outline: none;
    color: #fff;
    background-color: #6c0;
    cursor: pointer;
    margin:auto;
  margin-top: 15px;
font-size: 1em; letter-spacing: 2px;}
.en__submit >button:hover{background-color: #6FDE00;}
 .en__field__error{color:red; font-size:0.7em;} 
.en__component--row{display: block !important}
.en__component--column{min-width: 220px !important;} 
  #kakao-login-btn {display: none;
}
 
 #fb-login-btn {
    background-image: url(https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1851/facebook_icon.png?v=1585276105000);
    background-color: #34589d;
    color: #fff;
}
#fb-login-btn {
    border-radius: 5px;
    padding: 10px 10px 12px 28px;
    width: 172px;
    display: inline-block;
    text-align: right;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 6px 50%;
    margin-bottom: 15px;
}
footer{background-color: rgba(0,0,0,0.55); width:100%; height: auto; padding-top: 30px;
padding-bottom: 30px; margin-top: 140px;}
.slogan_warp{margin: auto}
.slogan_warp>img{margin: auto; width:30px; display: block;}
.slogan{color:rgba(102,204,0,0.74); text-align:center; font-size: 0.8em}
hr{width:60%;
  border-top: 1px dotted #585858;
 border-bottom: 1px dotted hsla(0, 0%, 100%, 0.34);}
ul{float: right;
    position: relative;
    left: -50%; list-style-type: none;}
li{float: left;
    position: relative;
    left: 50%; margin-left: 20px; font-size: 0.8em;
    }
.links>li>a{color:#afafaf; text-decoration:none; transition: all 0.5s; }
.links>li>a:hover{color: rgba(102,204,0,0.81);}

.copy_right{width:100%; margin:auto; text-align:center; margin-top:10px; font-size:0.8em; color:#888888}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
  
 .sign_up_btn{display: none;}
  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  .sign_up_btn{display: none;}
  
}
  

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 767px) and (max-width: 1024px) {
 .donation_btn{display: none;}
 .left_contents{width: 48%;}
 h2{font-size:1.3em;}
 .right_form{width:30%;}
 
 #fb-login-btn{width: 55%;
    float: left;
    font-size: 13px;
    font-weight: 600;}

#kakao-login-btn {display: none;
}

 footer{
bottom: 0;
left: 0;
right: 0;} 

}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}


/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
 .sign_up_btn{display: none;}
 .left_contents{width:46%;}
 
#fb-login-btn{width:148px; }
.imgcaption{position:absolute;
  bottom: 1px; opacity:0.7;
  box-sizing: border-box;
  width: 100%; padding: 3px;
  background: #000;color:#fff;
  font-size: 0.7em;}
 .ic_category{font-size: 0.7em; color: gray; margin-bottom:-7px; text-align: center;} 
 .imgcaption >h3{font-size:0.9em; text-align: center;}
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
 
  .wrap {
            display: flex;
            flex-direction: column-reverse;
        }
        .right_form{
            margin-bottom: 20px;
            margin-top: -50px;
        }
        .top_button{
            display: none;
        }
    p{font-weight: 500;}
 
 .left_contents>p{background-color: #00000078;}

.ic_caption h3{font-size:0.9em;}
 .log>img {width:160px;}
.donation_btn{display: none;}
 .top_button{width:84px;}
.left_contents{width:90%; margin: auto !important; float: none;}
.right_form{width: 76%; float: none; margin:auto; margin-bottom: 40px !important;}
 .slogan{width:85%; margin: auto;}
 li{float: none; text-align: center; margin-left: 0!important;}
 h2{font-size: 1.3em;}
 .form_text{font-size: 1em;}

 #fb-login-btn{width: 34%;
    font-size: 13px;
    font-weight: 600;}


#fb-login-btn {
    border-radius: 5px;
    padding: 10px 10px 12px 28px;
    display: inline-block;
    margin-bottom: 20px;
    text-decoration: none;
    font-size: 10px;
    font-weight: 400;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 6px 50%;
}

.imgcaption{position:absolute;
  bottom: 1px; opacity:0.7;
  box-sizing: border-box;
  width: 100%; padding: 3px;
  background: #000;color:#fff;
  font-size: 0.7em;}
 .ic_category{font-size: 0.7em; color: gray; margin-bottom:-7px; text-align: center;} 
 .imgcaption >h3{font-size:0.9em; text-align: center;}
}