body {background: #fff; font-size: 1.1rem;}
.tutorial_container {padding:0px; margin: 0 auto;}
.top {width:50px; height:50px; background: #fff; border-radius: 50px; text-align: center; line-height: 35px; box-shadow: 1px 2px 10px rgba(77, 77, 77, 0.29); position: fixed; right:30px; bottom:30px; cursor: pointer; border:2px solid #145495; z-index: 1000;}
.top i {font-size: 1.6rem; color:#145495;}

.active_line {text-decoration: underline;}

/*--------------------[ MAIN ]------------------*/
.main{
    width:100%; height:300px; 
    background-image: url(/images/earlytms/tutorial/tutorial-01.svg),url(/images/earlytms/tutorial/tutorial-02.svg);
    background-repeat: no-repeat;
    background-color: #4197c7;
    background-position: top center, bottom center;
    background-size: 1440px auto;
    border-bottom: 3px solid #003949;
} 
.main h2 {font-weight: bold; color:#fff; text-align: center; padding-top:130px; margin-bottom: 10px;}
.main p {color:#fff; text-align: center; font-weight: 400;}

/*--------------------[ SECTION ]------------------*/
.tutorial_container {display: flex; max-width: 1440px;}
.section_l {width:25%; background: #ebebeb; padding:30px; padding-top:60px}
.section_l p:first-child {letter-spacing: 2px; font-weight:bold; font-size: 1.1rem; color:#989797; margin-bottom: 18px;}
.section_l_txt {padding-bottom: 20px;}
.section_l_txt li {font-size: 1.1rem; color:#6a6a6a; line-height: 35px;}
.section_l_txt li:first-child a {line-height:50px; font-size: 1.3rem; color:#145495; font-weight: bold;}
.section_l_txt li:last-child a{line-height:25px;}

.section_r {width:70%; background: #fff;}
.section_r .welcome {display: block; width:100%; margin-bottom: 50px;}
.section_r .welcome p {width: 90%; margin:0 auto; padding:30px 0 15px 0; line-height: 25px; color:#6a6a6a;}
.section_r .welcome:first-child strong {font-weight: bold; color:#6a6a6a;}
.section_r .welcome .link {width:500px; height:60px; margin:10px auto; text-align: center; line-height: 60px; display: block; border:none; box-shadow: 0 30px 80px -20px rgb(5, 17, 59); border-radius: 50px; font-size: 1.2em; text-align: center; cursor: pointer;  color:#4b537f; border:3px solid #4b537f;
background: -webkit-linear-gradient(45deg,#d3d3d3,#fff);
background: -o-linear-gradient(45deg,#d3d3d3,#fff); 
background: -moz-linear-gradient(45deg,#d3d3d3,#fff);
background: linear-gradient(45deg,#d3d3d3,#fff);}
.section_r .welcome .link:hover{box-shadow: 0 30px 60px -20px rgb(5, 17, 59);}
.section_r .welcome .link i {color:#4b537f; padding-right:10px;}
.section_r .contents {display: block; margin-bottom: 50px;}
.contents h3 {margin: 0 0 30px 80px; font-size: 1.8rem; font-weight: 500;}
.contents .contents_txt {margin-top:5px;}

.contents_txt .title_box {height:55px; background: #3387b6; position: relative; transition: color 0.5s ease; cursor: pointer;}
.contents_txt .title_box p {color:#fff; padding-left: 80px; font-size: 1.5rem; padding-top:15px;}
.plus-minus-toggle {cursor: pointer; height: 21px; position: absolute; width: 21px; top:25px; left:30px; z-index: 2;}
.plus-minus-toggle:before, .plus-minus-toggle:after {background:#fff; content: ''; height: 5px; left: 0; position: absolute; top: 0; width: 21px; transition: transform 500ms ease;}
.plus-minus-toggle:after {transform-origin: center;}
.plus-minus-toggle.collapsed:after {transform: rotate(90deg);}
.plus-minus-toggle.collapsed:before {transform: rotate(180deg);}

.contents_txt .contents_sub {width:100%; margin:0 auto; line-height: 25px; margin-bottom: 30px;}
.contents_txt .contents_sub div {padding:10px;}
.contents_txt .contents_sub video {width: 100%; margin: 30px 0;}
.contents_txt .contents_sub img {display: block; padding:30px; margin:0 auto;}
.contents_txt .contents_sub .stress {font-weight: bold; color:#3387b6;}
.contents_txt .contents_sub .numbering {color:#6a6a6a; line-height: 30px;}


/*--------------------[ MEDIA QUERY ]------------------*/
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
body {overflow-x: hidden;}
.top {right:10px; bottom:10px;}
.main{background-image: url(/images/earlytms/tutorial/tutorial-01-m.svg),url(/images/earlytms/tutorial/tutorial-02-m.svg); background-size: 670px auto;}
.main h2 {padding-top:110px;}
.tutorial_container {flex-flow: column-reverse; padding:0px;}
.section_r, .section_l {width:100%;}
.contents .contents_txt:first-child {margin-top:80px;}
.contents_txt .contents_sub {margin-bottom: 0px;}
.section_l {padding:60px 10px 10px 10px;}
.section_l .section_l_txt {width:365px!important;}
.contents h3 {margin: 50px 0 30px 30px; width:80%; line-height: 120%;}
.contents_txt .title_box p {font-size: 1.2rem; padding-top: 18px;}
.contents_txt .title_box .padding_top {padding-top:8px;}
.contents_txt .contents_sub img {max-width: 100%; padding:0; margin:0 auto; margin-top:10px;}
.section_r .welcome a {width:360px;}
.section_r .welcome a i{display: none;}
.section_r .welcome .link {width:360px;}
    
@media only screen and (min-device-width : 667px) and (max-device-height : 375px) {
.contents .contents_txt:first-child {margin-top:0px;}
.section_l {padding:60px 30px 10px 30px;}
.contents_txt .title_box p {padding-top: 18px;}
.contents_txt .title_box .padding_top {padding-top:18px;}
}